週記7——ios中picker滑動穿透bug
摘要：
Bug：在使用mint-ui的picker元件時，datepicker和picker在ios的webview（bug是在Hybrid App發現的）中會出現滑動穿透的bug，導致彈層後面的頁面也會滾動，這使得使用者體驗很不好。
方案1：由於picker元件的滾動是用touch事件 + tr...
Bug：在使用mint-ui的picker元件時，datepicker和picker在ios的webview（bug是在Hybrid App發現的）中會出現滑動穿透的bug，導致彈層後面的頁面也會滾動，這使得使用者體驗很不好。
方案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... 問題產生的原因是一樣的，應該同樣可以用這個思路解決（目前沒測過）。