【Vue2.0】mint-ui解决IOS端picker和datetime picker穿透滚动问题

前言：在使用mint-ui的弹框时，滚动弹框内部分区域，会导致页面滚动。使用datetime picker时，只有ios会出现这个问题；而picker在安卓和ios上都有这个问题。

一、解决办法

       解决思路：弹出层打开时禁止body的滚动事件，弹出层关闭时回复body的滚动事件。

//vue数据变量区
data(){
/*----------监听函数---------*/
    handler:function(e){
        e.preventDefault()
    }
},
//vue函数方法区域
methods:{
    /*解决页面层级相互影响滑动的问题*/
    closeTouch () {
        document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
    },
    openTouch () {
        document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
    },
}

        在打开弹框时调用closeTouch()方法，关闭弹出窗口时调用openTouch()方法：

//侦听属性
watch:{
    //picker关闭没有回调函数，所以侦听该属性替代
    popupHandleVisible(val){
        if(val){
            this.closeTouch()
        }else{
            this.openTouch()
        }
    }
}

      这样就解决了使用picker时穿透滚动的问题。

      而datetime picker呢，在打开弹框时阻止默认事件，在关闭弹框时打开默认事件即可。

showDtpicker(){
    this.closeTouch();  //阻止默认事件
},
doChange(data){
    this.openTouch();    //打开默认事件
},
handleConfirm(data){
    this.openTouch();    //打开默认事件
},

二、参考博客

       【Vue2.0】 mint-ui解决移动端picker和datetime picker穿透滚动问题   https://blog.csdn.net/amyleeYMY/article/details/82588477