解决办法
在蒙层弹起的时候将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移动端弹起蒙层滑动禁止底部滑动操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue移动端弹起蒙层滑动禁止底部滑动操作”评论...
更新动态
2024年04月29日
2024年04月29日
- 张靓颖.2009-@音乐【华谊兄弟】【WAV+CUE】
- dnf缝纫机是必得一套吗
- dnf时装裤子身上穿的算吗
- dnf最高等级
- 《蟹蟹寻宝奇遇》评测:小蟹寻家记
- 《剑星》评测:油腻师姐炒的功夫菜,欠点火候
- 杉果福袋¥35.8抽《庄园领主》《地狱潜兵2》
- Bruckner-SymphoniesNos.56-NewPhilharmoniaOrchestra,OttoKlemperer(2024)[24-192]FLA
- 群星《梦舞池3》WAV分轨
- 黄凤凤.2011-丽风金典系列VOL.1【丽风】2cd【WAV+CUE】
- 大部分情侣是食色性也的酒肉情侣 3D区X光片的囧图
- 《崩坏:星穹铁道》迎一周年!登陆游戏送10连抽
- 布兰妮与父亲达成和解:需向父亲支付200多万法律费
- Taylor Swift霉霉《THE TORTURED POETS DEPARTMENT THE ANTHOLOGY》[FLAC][766M]
- 潘美辰《金歌点唱 HDCD 》[WAV+CUE][603M]