1. 程式人生 > >週記7——ios中picker滑動穿透bug

週記7——ios中picker滑動穿透bug

  問題:在使用mint-ui的picker元件時,datepicker和picker在ios的webview(bug是在Hybrid App發現的)中都會出現滑動穿透的bug,導致整個頁面都會滾動,這使得使用者體驗很不好。

   解決思路:由於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(); } },

 

除了mint-ui的picker,其他庫的picker元件可能也會有類似問題。比如vux、weui... 問題產生的原因是一樣的,應該同樣可以用這個思路解決(目前沒測過)。