解决小程序弹出层滚动穿透的问题

摘要:
我今天做小程序的时候遇到了一个棘手的问题,那就是弹窗层滚动渗透,也就是弹窗滚动,所以弹窗层下面的内容区域也会滚动,这很麻烦。

今天在做小程序的时候,遇到了一个棘手的问题,那就是弹出层的滚动穿透,即弹出层滚动,那么被弹出层覆盖的下面的内容区域也会进行滚动,这一点就很麻烦了。弹出层我是用的view标签然后使用的position:fixed进行的定位;说一下我的解决思路:

一:当弹出层里面无滚动的时候:

可以在遮罩的view标签上定义一个防止事件冒泡的方法:

catchtouchmove="preventD";


 preventD() {
    return
  }

    二:当弹出层有滚动的时候:

在小程序里面一般滚动组件使用的是scroll-view,这个时候我们只需要在打开遮罩的时候给最外层的view标签加上一个nowarp的标签,关闭弹出层的时候吧class移除掉就可以了,

.noscroll {
  top: 0px;
  left: 0px;
   100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}

  亲测有效

免责声明:文章转载自《解决小程序弹出层滚动穿透的问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇SVG图形引用、裁切、蒙版Oracle归档日志与非归档日志的切换及路径设置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

微信小程序: 使用本地缓存

参考:https://www.bilibili.com/video/BV1RK4y1v7zv?p=19&spm_id_from=pageDriver import { request } from "../../request/index.js"; //必须全路径 Page({ /** * 页面的初始数据 */data: {...

小程序怎么设置input框和键盘的距离

小程序我们在输入时,自动弹出的键盘有时候会遮住一部分输入框,从感官上给我们带了了不好的体验,那么怎么设置小程序怎么设置input框和键盘的距离? 小程序input组件给我们提供了一个属性: 例如: <input placeholder="请输入相关内容"bindinput="getText"value="{{text}}"cursor-spacin...

TP5.0+小程序商城构建(1)

1.导语 1.整体的思路与编程思想(大局观、AOP面向切面编程,10-20%) 2.具体的编程知识与技巧(TP5、小程序、数据库等80%) 2.课程内容与产品技术点 1.ThinkPHP5框架 1.编写业务逻辑 2.访问数据库 3.向客户端提供数据 2.MySQL 1.数据存储 2.数据表设计 3.与业务紧密集合 3.微信 1.支付 2.善于借鉴与模仿,学...

微信小程序如何使用分包做项目

  1.1. 介绍 地址: https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html   1.2. 作用 能够解决小程序项目包大小受限2M; 提高小程序首次启动速度; 方便团队协作开发; 1.3. 普通分包 就是通过配置app.json文件;   l 分包语...

微信小程序仿系统预览大图功能

问题:微信小程序系统自带的 wx.previewImage 预览大图功能很好用,用起来很顺畅丝滑,但是有一个致命问题:预览大图的时候是在新页面中打开,当前页面的生命周期会销毁,如果当前页面中没有实时的东西还好,但如果有类似 <live_player> <live_push> <video> 等组件,或者有计时器之类的变量...

前端自适应----单位rem

下边是大神对《移动前端自适应解决方案和比较》的链接: 移动前端自适应解决方案和比较 通过使用,自我感觉网易的解决方案是最方便我们使用时候的计算。 代码: (function(factory){ factory(); window.addEventListener('resize',factory,false); }(function(){...