1.遇到的问题:使用mint-ui的弹窗选择时底部页面会出现滚动效果(仅出现在苹果手机,安卓手机,pc端正常)
2.问题原因:滚动穿透,这是啥,我也不懂
3.解决方式:参考文档,了解下:https://blog.csdn.net/weixin_40126227/article/details/80858990
思路就是弹出层打开的时候禁止body的滑动事件,弹出层关闭恢复body的滑动事件
由于使用的是Vue2.0,所以修改了语法,详见代码
首先,在data内定义一个函数和定义添加touchmove监听和移除的方法
//Vue数据变量区域
data(){
/*---------监听函数--------------*/
handler:function(e){e.preventDefault();},
...
},
//Vue函数方法区域
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.");
},
...
}
其次,在打开弹出窗口时调用closeTouch方法,关闭弹出窗口时调用openTouch方法
以下为popup的处理:
//侦听属性
watch:{
signReasonVisible:function(newvs,oldvs){//picker关闭没有回调函数,所以侦听该属性替代
if(newvs){
this.closeTouch();
}else{
this.openTouch();
}
}
},
以下为datetime-picker的处理:
//Vue函数方法
methods:{
/*----------------弹窗类----------------------*/
openPicker1(index){//打开时间选择器
this.$refs.picker1.open();
this.closeTouch();//关闭默认事件
},
setTime(value){//时间赋值
this.openTouch();//打开默认事件
},
...
}