【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