您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了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.页面内弹窗因绝对定位导致页面压缩的问题 造成底部导航栏固定在输入键盘上面的问题
// 动态设置背景图的高度为浏览器可视区域高度 // 首先在Virtual DOM渲染数据时,设置下背景图的高度. this.bodyHeight = `${document.documentElement.clientHeight}`; // 然后监听window的resize事件.在浏览器窗口变化时再设置下背景图高度. window.onresize = function temp() { var bodyHeight = `${document.documentElement.clientHeight}`; that.bodyHeight = bodyHeight; };
通过判断 bodyHeight 数值的变化,来控制底部导航栏的出现与隐藏
看完上述内容,是不是对vue移动端弹起蒙层滑动禁止底部滑动的实现方法有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。