杰网资源 Design By www.escxy.com
解决办法
在蒙层弹起的时候将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.页面内弹窗因绝对定位导致页面压缩的问题 造成底部导航栏固定在输入键盘上面的问题
// 动态设置背景图的高度为浏览器可视区域高度
// 首先在Virtual DOM渲染数据时，设置下背景图的高度．
this.bodyHeight = `${document.documentElement.clientHeight}`;
// 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
window.onresize = function temp() {
var bodyHeight = `${document.documentElement.clientHeight}`;
that.bodyHeight = bodyHeight;
};
通过判断 bodyHeight 数值的变化，来控制底部导航栏的出现与隐藏
以上这篇vue移动端弹起蒙层滑动禁止底部滑动操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
杰网资源 Design By www.escxy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
杰网资源 Design By www.escxy.com
暂无评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。