vue移动端弹起蒙层滑动禁止底部滑动操作
解决办法
在蒙层弹起的时候将body设置为fixed定位
在蒙层消失的时候将body恢复原位
popupVisible(newValue){
if(newValue){
document.body.style.position='fixed';
document.body.style.width='100%';
document.body.style.height='100%';
}
else{
document.body.style.position='static';
document.body.style.height='auto';
}
},
设置为fixed的时候整个页面会恢复原位，如果需要把位置开始scrollY记下来，恢复的时候在滚到原来的位置
popupVisible(newValue){
if(newValue){
document.body.style.position='fixed';
document.body.style.width='100%';
document.body.style.height='100%';
this.top=window.scrollY;
}
else{
document.body.style.position='static';
document.body.style.height='auto';
window.scrollTo(0,this.top);
}
}
补充知识：解决使用vue时页面内有弹窗时禁止页面滚动以及页面内弹窗因绝对定位导致页面压缩的问题
如下所示：
@touchmove.prevent
当页面弹窗出现时设置@touchmove.prevent="false";
2.页面内弹窗因绝对定位导致页面压缩的问题造成底部导航栏固定在输入键盘上面的问题
//动态设置背景图的高度为浏览器可视区域高度
//首先在VirtualDOM渲染数据时，设置下背景图的高度．
this.bodyHeight=`${document.documentElement.clientHeight}`;
//然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
window.onresize=functiontemp(){
varbodyHeight=`${document.documentElement.clientHeight}`;
that.bodyHeight=bodyHeight;
};
通过判断bodyHeight数值的变化，来控制底部导航栏的出现与隐藏
以上这篇vue移动端弹起蒙层滑动禁止底部滑动操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短