ios中picker滑动穿透bug

Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动,这使得用户体验很不好。

方案1:由于picker组件的滚动是用touch事件 + translate实现的,所以,我们可以在picker弹层出现的时候禁止页面的默认滚动机制,picker弹层消失的时候解除禁用页面的默认滚动机制。

data () {
    return {

      /*---------监听函数--------------*/
      handler:function(e){e.preventDefault();}
    }
  },
  // 通过监听蒙层的显隐字段来控制页面滚动的禁用事件 或者在method方法里控制
 watch:{
     maskShow:function(newvs,oldvs){//picker关闭没有回调函数,所以侦听该属性替代
        if(newvs){
           this.closeTouch();
        }else{
           this.openTouch();
        }
     }
  },
  methods:{
    /*解决iphone页面层级相互影响滑动的问题*/
    closeTouch:function(){   /*  弹层出现时调用  */
        document.getElementsByTagName("body")[0].addEventListener('touchmove',
        this.handler,{passive:false});//阻止默认事件
        console.log("closeTouch haved happened.");
    },
    openTouch:function(){   /*  弹层关闭时调用  */
        document.getElementsByTagName("body")[0].removeEventListener('touchmove',
        this.handler,{passive:false});//打开默认事件
        console.log("openTouch haved happened.");
    },
    openPicker(){  /* 弹层出现 */
        this.openTouch();
    },
    closePicker(){  /* 弹层关闭   */
        this.openTouch();
    }
  },

方案2:当弹层出现的时候设置body{overflow: hidden;},弹层关闭时设置body{overflow: scroll/auto;}

除了mint-ui的picker,其他库的picker组件可能也会有类似问题。比如vux、weui... 问题产生的原因是一样的,应该同样可以用这个思路解决(目前没测过)。

posted @ 2018-11-24 12:01  奔跑的瓜牛  阅读(...)  评论(...编辑  收藏