vue移动端弹起蒙层滑动禁止底部滑动操作
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了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. = window.scrollY; } else { document.body.style.position = 'static'; document.body.style.height = 'auto'; window.scrollTo(0, this.); } }
补充知识:解决使用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移动端弹起蒙层滑动禁止底部滑动操作就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程