周记7——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... 问题产生的原因是一样的，应该同样可以用这个思路解决（目前没测过）。