一、如果popup内部不需要滑动:
防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件
<mt-popup
v-model="popupSCVisible"
position="bottom"
model="true"
closeOnClickModal="true"
@touchmove.native.stop.prevent //防止滚动穿透
>
但是:
vue的 @touchmove.prevent 可以用来阻止滑动,但是同时会禁止蒙层内的子元素的滑动事件,如果蒙层内子元素没有中间滑动需求(如只有点击需求),就可以用 @touchmove.prevent 实现阻止蒙层滑动穿透问题。
二、如果popup内部有滑动需求:
最近做的项目中用到了mint-popup,项目需求需要在popup中添加一个可以下拉的列表。可是下拉弹窗列表的同时,会穿透导致body跟着下拉。为了解决这种问题尝试了很多办法比如:overflow: hidden, height:100% @touchmove.native.stop.prevent
watch监听v-modal、 e.preventDefault()等都没能解决,不过功夫不负有心人终于找到解决办法,以下为解决办法:
那么只需要在body或者父级div设置fixed属性即可。
body {
position: fixed;
left: 0;
top: 0;
}
三、
通过监听popupVisible变量,在弹窗出现后禁止body节点touchMove事件,弹窗消失后恢复body节点的touchMove事件
<mt-popup
v-model="popupTopVisible"
position="top"
model="true"
closeOnClickModal="true"
>
data(){
popupTopVisible: false,
handle: function(e){
e.preventDefault()
},
},
watch:{
popupTopVisible(value) {
if(value) {
this.closeTouch ()
}else{
this.openTouch ()
}
},
}
methods: {
closeTouch () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
},
openTouch () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
},
}
四、
Datetime Picker:
<mt-datetime-picker
ref="picker"
type="time"
v-model="pickerValue"
@touchmove.native.stop.prevent>
</mt-datetime-picker>
对于时间组件加了@touchmove.native.stop.prevent,选择时间滚动的时候底部页面就不会跟着滚动了。