三种穿透滑动情况以及解决办法
1.引用mintui中mt-popup下拉选择框选择内容时,滑动穿透问题
(1)如果下拉选择内容过少,mt-popup内部不需要滑动:
就只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件
<mt-popup
v-model="popupVisible"
position="bottom"
popup-transition="popup-fade"
:closeOnClickModal="false"
@touchmove.native.stop.prevent
> //防止滚动穿透
(2)如果下拉选择内容较多,mt-popup内部需要进行滑动:
- 页面中
<mt-popup
v-model="popupVisible"
position="bottom"
popup-transition="popup-fade"
:closeOnClickModal="false"
@touchmove.native.stop.prevent
> //防止滚动穿透
- data中
- data(){
popupTopVisible: false,
handle: function(e){
e.preventDefault()
},
},
- watch中
watch:{
popupTopVisible(value) {
if(value) {
this.closeTouch ()
}else{
this.openTouch ()
}
},
}
- method中
methods: {
open() {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {
passive:false})//打开默认事件
},
close() {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {
passive:false})//阻止默认事件
},
}
2.蒙层上的页面内容不需要滑动时,出现的滑动穿透问题
在蒙层上直接添加:@touchmove.prevent
<div class="ruleWrap" v-show="ruleMaskShow" @touchmove.prevent></div>
2.蒙层上的页面内容长于页面高度需要进行滑动时,出现的滑动穿透问题
- 在html文件添加如下代码
<script type="text/javascript">
//解决遮罩层滚动穿透问题,分别在遮罩层弹出后和关闭前调用
const MaskProblem= ( (bodyCls) =>{
let scrollTop;
return {
afterOpen: function () {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function () {
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop;
}
};
})('mongolia_open');
</script>
- 全局CSS中添加
body.mongolia_open {
position: fixed;
width: 100%;
}
- 在vue组件中,对话框弹出和关闭的地方调用上面那段JS代码
对话框弹出后调用:MaskProblem.afterOpen();
对话框关闭前调用:MaskProblem.beforeClose();
三种穿透滑动情况以及解决办法
1.引用mintui中mt-popup下拉选择框选择内容时,滑动穿透问题
(1)如果下拉选择内容过少,mt-popup内部不需要滑动:
就只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件
<mt-popup
v-model="popupVisible"
position="bottom"
popup-transition="popup-fade"
:closeOnClickModal="false"
@touchmove.native.stop.prevent
> //防止滚动穿透
(2)如果下拉选择内容较多,mt-popup内部需要进行滑动:
- 页面中
<mt-popup
v-model="popupVisible"
position="bottom"
popup-transition="popup-fade"
:closeOnClickModal="false"
@touchmove.native.stop.prevent
> //防止滚动穿透
- data中
- data(){
popupTopVisible: false,
handle: function(e){
e.preventDefault()
},
},
- watch中
watch:{
popupTopVisible(value) {
if(value) {
this.closeTouch ()
}else{
this.openTouch ()
}
},
}
- method中
methods: {
open() {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {
passive:false})//打开默认事件
},
close() {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {
passive:false})//阻止默认事件
},
}
2.蒙层上的页面内容不需要滑动时,出现的滑动穿透问题
在蒙层上直接添加:@touchmove.prevent
<div class="ruleWrap" v-show="ruleMaskShow" @touchmove.prevent></div>
2.蒙层上的页面内容长于页面高度需要进行滑动时,出现的滑动穿透问题
- 在html文件添加如下代码
<script type="text/javascript">
//解决遮罩层滚动穿透问题,分别在遮罩层弹出后和关闭前调用
const MaskProblem= ( (bodyCls) =>{
let scrollTop;
return {
afterOpen: function () {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function () {
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop;
}
};
})('mongolia_open');
</script>
- 全局CSS中添加
body.mongolia_open {
position: fixed;
width: 100%;
}
- 在vue组件中,对话框弹出和关闭的地方调用上面那段JS代码
对话框弹出后调用:MaskProblem.afterOpen();
对话框关闭前调用:MaskProblem.beforeClose();