Bug描述:使用mint-ui的picker組件時,datepicker和picker在ios的webview(bug是在Hybrid App發現的)中會出現滑動穿透的現象,致使彈層後面的頁面也會滾動,這使得用戶體驗很很差。ios
方案1:因爲picker組件的滾動是用touch事件 + translate實現的,因此,咱們能夠在picker彈層出現的時候禁止頁面的默認滾動機制,picker彈層消失的時候解除禁用頁面的默認滾動機制。web
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;}app
除了mint-ui的picker,其餘庫的picker組件可能也會有相似問題。好比vux、weui... 問題產生的緣由是同樣的,應該一樣能夠用這個思路解決(目前沒測過)。iphone