1.遇到的問題：使用mint-ui的彈窗選擇時底部頁面會出現滾動效果（僅出現在蘋果手機，安卓手機，pc端正常）

2.問題原因：滾動穿透，這是啥，我也不懂

思路就是彈出層開啟的時候禁止body的滑動事件，彈出層關閉恢復body的滑動事件

由於使用的是Vue2.0，所以修改了語法，詳見程式碼

首先，在data內定義一個函式和定義新增touchmove監聽和移除的方法

//Vue資料變數區域
data(){
/*---------監聽函式--------------*/
    handler:function(e){e.preventDefault();},
...
},
//Vue函式方法區域
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.");
    },
    ...
}
 

其次，在開啟彈出視窗時呼叫closeTouch方法，關閉彈出視窗時呼叫openTouch方法

以下為popup的處理：

//偵聽屬性
watch:{
    signReasonVisible:function(newvs,oldvs){//picker關閉沒有回撥函式，所以偵聽該屬性替代
        if(newvs){
            this.closeTouch();
        }else{
            this.openTouch();
        }
    }
},

以下為datetime-picker的處理：（openPicker1為觸發開啟選擇器的事件，setTime為:confirm=“setTime”模板繫結的回撥函式）

//Vue函式方法
methods:{
/*----------------彈窗類----------------------*/
    openPicker1(index){//開啟時間選擇器
        this.$refs.picker1.open();
        this.closeTouch();//關閉預設事件
    },
    setTime(value){//時間賦值
        this.openTouch();//開啟預設事件
      },
    ...
}