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

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能