由於 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();
}
},