ios中mint-ui picker滑動時頁面跟着滾動的解決方法

由於 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("阻止默認事件");
  },
  openTouch:function(){   /*  彈層關閉時調用  */
    document.getElementsByTagName("body")[0].removeEventListener('touchmove',
      this.handler,{passive:false});//打開默認事件
    console.log("打開默認事件");
  },
  openPicker(){  /* 彈層出現 */
    this.closeTouch();
  },
  closePicker(){  /* 彈層關閉   */
    this.openTouch();
  }
},

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章