记录在一个webapp中遇到的坑

本文分享了在移动端Vue项目中遇到的兼容性问题及解决方案,包括滚动卡顿、文字溢出显示、日期格式转换、滑动穿透、底部固定定位调整、图片上传处理等,覆盖iOS、安卓及不同浏览器特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近做了一个移动端项目,使用了vue脚手架,在这里记录一下在里面遇到的坑吧

主要是在ios或者安卓上兼容性问题

1页面上头部有菜单,底部有菜单,中间 有菜单的时候 选择 头部底部固定定位,中间绝对定位,然后超出部门overflow:scroll,在ios手机上滚动的时候会出现十分卡顿的情况,这时候需要在ios上加

/*使得在ios手机上滑动起来更加书顺畅*/
-webkit-overflow-scrolling:touch;

2 底部采用固定定位的时候在ios上滑动的时候会把底部固定定位的也拉起来,这个是属于ios的webview弹性效果。由于我这个是嵌套在钉钉app内,找到api将其禁用掉了

3 使得一段文字在页面中最多显示二行,超出部分变为省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

要加上注释的这段话,否则在本地运行没有问题,打包完以后就不会出现省略号了

4 使用new Date('2016-01-01 00:00:00')转换时候 在火狐和ie上会出问题,是字符串格式不被某些浏览器支持

  1. var date="2016-12-12 10:10:10";

  2. date=date.replace(new RegExp(/-/gm) ,"/");   //将所有的'-'转为'/'即可

  3. Date d=new Date(date);

5 解决移动端滑动穿透问题

在一个父页面上弹出一个子页面,在子页面上进行手指滑动的时候,如果父页面也可以滚动的话 会导致父页面也跟着滚动

因为是在vue项目里,解决办法是是在watch里监测子页面是否显示,显示的话给body为固定定位,且overflow:hidden

如果没有显示,就静态定位,overflow:auto就好了

6当底部有个固定定位,页面上有个input框的时候,点击input框的时候,在安卓上会把底部固定定位的顶起来,非常不友好,

也是通过watch来进行监听来判断,先定义一个变量a,当窗口变化触发onresize事件的时候,这个变量a高度等于窗口高度,在定义一个常量b为窗口高度,如果a<b.说明有键盘弹出了,这个时候将底部固定定位的隐藏,否则显示

showHeight:function(){
   if(this.showHeight < this.old){
     document.querySelector('#footer').style.display = 'none';
   }
   else{
     document.querySelector('#footer').style.display = 'block';
   }
 }
window.onresize = function(){
  _this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
};

考虑到兼容性问题 document.documentElement.clientHeight || document.body.clientHeight;  获取页面高度的时候这二个都写上

7图片上传最开始用的一个ui组件提供的,但是后来由于需求变化,压缩,旋转,,后来自己写了

首先使得input框的类型为file类型,原生样式比较难看给 给外面加个父元素相对定位,这二绝对定位他透明度设置为0,然后加一个和他一样大小的图片,或者写一个方形div,总之会比原来原生好看

点击图片上传,input框触发change时间的时候获取到文件,采用h5提供的api,new FileReader();每次点击完要使得input框值为空否则不能继续上传相同的图片。没有触发change事件了就,。然后将文件转换为base64格式,之后通过onload事件获取到src,这个时候图片比较大需要压缩,用画布将其进行压缩。由于是移动端在手机拍照的话可能会导致旋转,这个时候需要引入一下exif。js对其进行纠正 ,这个时候基本就完成了,但是上传传给后端需要通过formdata,现在的文件数ibase64格式的,需要再将base64转为文件对象,然后通过formdata传给后台、大致思路是这样的,下面贴下代码

par.loadingShow = true;
  var ipt = document.querySelector('#upFile');
  var Orientation;
  var file = ipt.files[0],
    reader = new FileReader(),
    image = new Image();
  //  每次选择完照片以后清空input框的值  否则再次选择相同的图片无法选择
  ipt.value = '';
  console.log(file);
  if (file) {
    EXIF.getData(file, function () {
      Orientation = EXIF.getTag(this, 'Orientation');
      });
    //将图片2将转成 base64 格式
    reader.readAsDataURL(file);
    // 文件读取成功后的回调
    reader.onload = function (ev) {
      image.src = ev.target.result;
      // 读取图片成功后将图片进行压缩处理
      image.onload = function () {
        let imgWidth = image.width;
        let imgHeight = image.height;
        let quality = 0.3;
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");

        // 对图片尺寸进行压缩  如果宽度大于750
        if(imgWidth >= imgHeight && imgWidth > 750){
          imgWidth = 750;
          imgHeight = Math.ceil(750 * this.height / this.width);
        }else if(imgWidth < imgHeight && imgHeight > 1334){
          imgWidth = Math.ceil(1334 * this.width / this.height);
          imgHeight = 1334;
        }
        canvas.width = imgWidth;
        canvas.height = imgHeight;

        //  根据拍摄的照片的角度进行判断旋转
        if (Orientation && Orientation != 1) {
          switch (Orientation) {
            case 6:
              canvas.width = imgHeight;
              canvas.height = imgWidth;
              ctx.rotate(Math.PI / 2);
              ctx.drawImage(image, 0, -imgHeight, imgWidth, imgHeight);
              break;
            case 3:
              ctx.rotate(Math.PI);
              ctx.drawImage(image, -imgWidth, -imgHeight, imgWidth, imgHeight);
              break;
            case 8:
              canvas.width = imgHeight;
              canvas.height = imgWidth;
              ctx.rotate(3 * Math.PI / 2);
              ctx.drawImage(image, -imgWidth, 0, imgWidth, imgHeight);
              break;
          }
        } else {
          ctx.drawImage(image,0,0,imgWidth, imgHeight);
        }
        let cdata = canvas.toDataURL("image/jpeg",quality);
        //  将base64文件转化为图片文件
        var arr = cdata.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        let upfile = new File([u8arr],file.name,{type: mime});
        let fd = new FormData();
        fd.append('file',upfile);
        let config = {
          headers: {'Content-Type':'multipart/form-data'}
        };
        axios.post(process.env.API_host+'/aftersales/tool/upload',fd,config)
          .then((res)=>{
            // alert(1);
            par.imgUrl.push(res.data.data);
            par.loadingShow = false;
            par.imgNub = `(${par.imgUrl.length}/9)`;
            if(par.imgUrl.length == 9) {
              par.addIconShow = false;
              par.loadingShow = false;
              return;
            }
          })
          .catch(function(error){
            Toast(`图片上传失败,请重新上传!`);
          });
      }
    }
  }
},

这是在移动端中遇到一些坑以及解决方法,有些可能不是最优的,在这记录一下,后续遇到还会继续更新的。

对了由于引入了一个vue图片预览插件导致打包后在某些浏览器打开直接白屏,不兼容,打包文件出错

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值