小程序开发-2弹框遮罩层滚动穿透

最新推荐文章于 2023-07-15 16:22:47 发布
最新推荐文章于 2023-07-15 16:22:47 发布
阅读量297 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40715438/article/details/118959196
版权

文章目录

问题描述

自实现的简单底部弹框和fixed遮罩层，在弹出后仍能滑动背后的列表，且弹框内内容滚动到底后继续滑动会滑到背后的列表

解决方案

1.使用page-style

实现方法转载

2.catchtouchmove+scroll-view

  • 具体实现：
    • 在弹窗最外部包裹上加catchtouchmove，并赋值一个自定义的空事件处理函数
    • 内部弹窗需要滚动的地方改用scroll-view，并设置scroll-y为true
    • ps：scroll-view默认不支持flex布局，如果内容用到了flex布局，要在标签上设置enable-flex属性
用uniapp开发项目时为什么你的 Dialog 会导致滚动穿透？一招教你解决!
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-08 175
只需阻止页面滚动：小程序使用，UniApp 使用。需要内部滚动的弹窗：借助page-meta动态控制页面的滚动状态。解决了这个问题后，我再也不用担心用户滑动背景页面时的混乱体验了！dialog滚动穿透解决方案
微信小程序解决自定义弹出层滑动时，下层页面滚动问题
厦门在乎科技
06-16 2896
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，
小程序 弹出层 禁止页面滚动
Nina_xy123的博客
08-20 4573
添加自定义的弹出框后，当滚动鼠标时下边的页面也会跟着滚动 解决办法： 在弹出层上添加 catchtouchmove=’true’ <!--弹出框 --> <view class="sh_Model_box" catchtouchmove='true'> ... </view> 注意：开发工具的模拟器上没有效果，必须真机测试，真机上有效果...
# 解决微信小程序遮罩层底部页面滚动
weixin_47685787的博客
05-19 556
解决微信小程序遮罩层底部页面滚动 一、wxml文件添加catchtouchmove=“move”。 <view class="" class="zzc" hidden="{{zzc}}" catchtouchmove="move"> <view class="absolute " style="bottom: 10vh;left: 0;right: 0;"> <view class="dpcc relative"> &lt
小程序catchtouchmove="true" 事件导致页面不能滚动
sinat_38728634的博客
04-28 8186
https://developers.weixin.qq.com/community/develop/doc/000aacfbac8e002f14e6451915b400 弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动，但是如果弹窗元素设置了该属性，弹窗内的自己写的overflow:auto就会失效，这时不能用自己写的overflow，要改...
小程序页面滚动穿透，弹出层下面页面滚动的解决方法
weixin_37680021的博客
03-14 2642
一、场景 在项目中经常遇到一个页面，如很长的详情页，长的列表页，在这种页面会弹出一个弹框层，如下图： 这个时候就会出现一个问题，当弹窗里面的内容过多，出现滚动条时，弹窗里面的滚动条滑动到了最底部，继续滑动页面，会带动下面的详情页或列表页的继续滑动，触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页或详情页 二、解决办法 网上搜索了一圈，试了一下， 监听弹框的状态变量，如果弹框展示，就给对应的列表页面，添加对应的样式 <View className="order_details" styl
微信小程序下拉刷新获取数据和触底事件刷新实现
最新发布
m0_62785037的博客
07-15 4018
微信小程序下拉刷新获取数据和触底事件刷新实现
微信小程序 - 解决遮罩层的滚动穿透问题（以及实现弹框功能点击蒙层关闭弹框）
sunshime的博客
09-24 2673
  今天我在做一个点击某个按钮显示弹框的时候，发现弹框自带的蒙层盖完整个页面了，但是被盖住的内容还是可以上下滑动，这个效果并不是我想要的，经过我多次研究并百度之后，我终于可以解决这个问题了，下面我来说一下如何实现的： 注意点：这个效果在编辑器（电脑）上面是看不出效果的，需要用手机上看才能看出效果 1、弹框里面没有滚动条的情况：   直接在弹框蒙层最外层加上catchtouchmove="{{tru...
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
微信小程序 —— 解决自定义弹窗出现后，蒙层下的页面仍可以滚动的问题
热门推荐
Wu_shuxuan的博客
11-30 1万+
在微信小程序开发中，会碰到自定义弹窗出现后，蒙层下面的页面仍可以滚动的问题。例如： 解决方法：1. 先点击出现蒙层时，页面的最外层view：height:100vh （灵活设置，蒙层出现时height:100vh;,反之height: ;）2. 在蒙层的最外层view中加入catchtouchmove=”preventTouchMove” -wxml <view class="Montmor
微信小程序开发踩坑之路--2 事件穿透
前端老兵
07-24 1万+
很久没更新博客了，最近实在是忙~疲惫的分割线~ (=_=) " 今天要说的是一个小程序踩坑的事 —— 触摸滚动事件的穿透，相信很多用过模态（Modal）弹窗之类的同学都知道，一般会让底部的内容不可操作；而我遇到的问题是底部的内容是可滚动的，而出现的弹窗也是可滚动的，但是，当你在弹窗中滚动到尽头，再次继续滚动，滚动事件就会穿透到 modal 下面的内容，让内容滚动，这种情况下如何解决滚动事件的穿透...
微信小程序弹出层点击穿透问题
weixin_34228662的博客
04-25 2578
问题描述：使用小程序的modal组件实现遮罩层效果时，会出现滚动穿透的问题，即遮罩层后面的页面依旧可以滚动。 解决方案： 　　给底层页面动态添加position:fixed; 代码： wxml： <modal class="mask" wx:if="{{hasMask}}" bindtap='hideMask'> 我是遮罩层 </modal...
解决微信小程序tabBar自定义弹窗遮挡不住
小陈的博客
02-07 6231
这个方法就是完全放弃微信官方的tabbar；自己用SPA的方式去实现一个tabbar;这个方法的优点tabbar能自己定制化；顺手也解决了盖不住的问题；缺点在于：要自己实现微信官方的实现的功能比如wx.switchTab等基础功能需要自己实现路由管理需要比较大测试成本整体实现成本还是比较大的，具体实现方法这里不做演示，感兴趣的可以自行找相关的文章；社区有许多这个文章。
微信小程序 - 解决弹框遮罩层的滚动穿透问题
qinnzheng
09-16 5412
小程序穿透
小程序中fixed定位弹框页面穿透问题
一个有节操的码农
07-19 1974
需求描述：新开发支付宝小程序，自定义popup弹框，弹框中有滚动区域，弹框出现后页面需要滚动到指定位置。 问题分析：popup弹框在上，铺满整个屏幕，没有问题；页面高度大于可视区域（超出100vh）;引发的问题，弹框出现后，页面还能上下滚动（在真机上，页面穿透了），小程序机制的问题（以整个page为单位）。 解决思路：当弹框出现后，采用小程序自带指令 disableScroll 禁用页面滚动，没有问题，但是导致弹框里现有的滚动也不行了（实际需求是弹框里也有滚动的场景，禁用后整个页面任何元素都不能滚.
小程序弹窗显示，背景滚动穿透问题
kjhytfh的博客
06-09 753
小程序弹窗显示，背景滚动穿透问题 隐藏时： 这里注意有隐藏的方法都要加
微信小程序弹窗滚动导致页面穿透问题的解决办法
leiwenen的博客
04-28 6178
最近在做小程序，由于小程序提供的弹窗样式有限，我们通常会自定义弹窗组件（我都是在弹窗蒙层上加了catchtouchmove="true",保证最基本的穿透问题但是解决不了弹窗内容区域需要滚动的情况），那么就会导致页面穿透问题，具体表现有手指上下滑动弹窗部分，底部页面也同时滑动、如果配置了onPullDownRefresh页面刷新则页面刷新也会触发，我的解决过程如下： 1.最简单的想法： 最开始...
微信小程序----------------------自定义遮罩层
m0_47230916的博客
10-15 642
本文转自： 微信小程序中遮罩层的实现 uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华） 移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案 先把自己用到的方法记录下来 wxml代码 <view class="wrap"> <!---------------------------------------------------------------------------------1 --> <!--页面内容区 --> <
Taro 小程序做蒙层，蒙层下页面会滚动。滚动穿透问题
weixin_46662539的博客
08-12 3274
最近在写小程序的时候，需要手写一个拨打打电话的功能，点击查看弹出蒙层展示手机号，点击电话号码进行拨打电话。 前面拨打电话API都挺顺利，后来忽然发现蒙层下的页面依然还能滚动。一开始以为层级问题，调整层级一直没什么效果。 于是开始查文档，发现文档中提示 于是开始一个个方法进行测试。第一种方法不适合，因为当前页面滚动元素没办法给到高度，会有问题，就不细说了。 开始第二种办法，我的项目还是使用Taro.2,所以使用catchtouchmove属性，如果为Trao3,可使用catchMove属性。 <Vie
微信小程序修复蒙层滚动穿透问题全攻略
"微信小程序中存在一个常见的用户体验问题，即所谓的‘滚动穿透’或‘蒙层穿透’。这个问题指的是在使用fixed布局显示蒙层（如弹窗）时，用户滚动屏幕，不仅蒙层会滚动，底部的内容也会跟随滚动。这显然对用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值