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 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
浅谈react useEffect闭包的坑
Jun 08 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
简单实现python进度条脚本
2017/12/18 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
django用户登录和注销的实现方法
2018/07/16 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python之字典添加元素的几种方法
2020/09/30 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
广场舞大赛策划方案
2014/05/31 职场文书
办理房产过户的委托书
2014/09/14 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
JS 基本概念详细介绍
2021/10/16 Javascript
Spring Boot实现文件上传下载
2022/08/14 Java/Android