vue移动端弹起蒙层滑动禁止底部滑动操作


Posted in Javascript onJuly 22, 2020

解决办法

在蒙层弹起的时候将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移动端弹起蒙层滑动禁止底部滑动操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 #Javascript
vue 弹出遮罩层样式实例
Jul 22 #Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 #Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 #Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 #Javascript
vue项目中使用多选框的实例代码
Jul 22 #Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
You might like
php页面缓存方法小结
2015/01/10 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
繁简字转换功能
2006/07/19 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
python模块之re正则表达式详解
2017/02/03 Python
pandas数据集的端到端处理
2019/02/18 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
python连接mongodb集群方法详解
2020/02/13 Python
大数据分析用java还是Python
2020/07/06 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
11月红领巾广播稿
2014/01/17 职场文书
参观接待方案
2014/03/17 职场文书
二年级学生评语大全
2014/04/23 职场文书
七夕情人节促销方案
2014/06/07 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
优秀校长事迹材料
2014/12/24 职场文书
休学证明范本
2015/06/19 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL