小程序滑动穿透问题

最新推荐文章于 2025-03-13 18:51:27 发布
最新推荐文章于 2025-03-13 18:51:27 发布
阅读量329 收藏
点赞数

1.如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="move" move:function(){};

2.如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class {position：fixed}，弹出层消失的时候移除。

 

https://segmentfault.com/q/1010000011134345

解决微信小程序自定义弹窗滚动穿透问题
aaa123aaasqw的博客
05-30 1625
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
微信小程序中滑动view视图的时候，里面的那个view也会跟着滑动，解决办法滚动穿透问题只需要在该页面js的onShow中加上wx.setPageStyle即可
番茄Salad
06-13 334
设置了z-index: 100;滑动view的时候，里面的那个view也会跟着滑动，view被穿透了，不知道是不是我布局的问题。。
解决微信小程序中的滚动穿透问题
01-03
Mask-Scroll > 原码地址 * 蒙层防穿透问题 > 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候， 手指滑动屏幕会出现底部内容也滑动的现象. 如图： 当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。 这就是蒙层穿透， 也可以叫 ‘滚动穿透’. 当然出现这种情况， 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头…) ## 解决方案 这种要分情况， 当蒙层没有滚动条的时候。 当蒙层出现滚动条的时候 1. 当弹窗没有滚动条的时候。 直接监听 catch:touchmove 方法， 然后直接返回就可以了。 代码可以去看f
微信小程序滑动穿透解决方案
yuzhou blog
06-15 3599
微信小程序滑动穿透解决方案
小程序页面滚动穿透
wei
06-26 5578
小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个Modal层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示
小程序滑动穿透问题处理
ITzhongzi的博客
06-04 472
滑动穿透描述 当我们在弹出层或者模太框上滑动手指的时候，最底下的UI视图跟着滑动。 解决方案 在滑动的元素上加上一个空的滑动事件（万能方法） /*这是弹出层的盒子*/ <view catchtouchmove="touchmove"> </view> touchmove: function(){ }, 这样手指滑动就会触发这个滑动事件，而不会向上传导，导致滑动穿透。 注意： 小程序提供bind 和 catch两种绑定事件方法，bind是会冒泡的，catch
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序解决弹窗滑动穿透问题
为啥不能换名字的博客
08-13 892
## 解决方案 1.当弹窗没有滚动条的时候 直接监听 catch:touchmove 方法， 然后直接返回就可以了 <view catchtouchmove="{{preventTouchMove}}"></view> preventTouchMove(){ return } 2.当弹窗内容需要滚动的时候&&当前页面无需滚动 如果你页面没有滚动条可以直接给当前页面最父级元素fixed定位一下或者overflow：hidden一下 3当弹窗内容需
【小程序】解决小程序遮罩层滑动事件的穿透问题
热门推荐
qing_小诺的博客
01-08 1万+
1、问题描述： 滑动自定义的遮罩层，会出现滚动穿透的问题，如下图，即遮罩层下面的列表页面依旧可以滚动。 2、解决办法：分为两种情况： 情况1：【遮罩层没有滚动事件】 直接在遮罩层的父节点上添加catchtouchmove="preventTouchMove"属性，例如： &lt;view class="mask" catchtouchmove="preventTouchMove"&...
小程序滚动穿透解决方案
ZionHH的博客
11-19 880
在遮罩层添加catchtouchmove <view class="modal-cover" catchtouchmove> <!-- 弹出层需要滚动使用 scroll-view --> <scroll-view></scroll-view> </view> 在页面添加page-meta（文档） <page-meta page-style="{{showModal ? 'overflow: hidden' : ''}}" /&g.
小程序中的几种情况下滑动穿透解决方案
BetterGG的博客
08-02 7073
情景一：只要求滑动遮罩区域时，底部内容不可滚动         在 遮罩层 设置 catchtouchmove 函数 &lt;view class='{{cover}}' data-id='first' catchtouchmove="preventD"&gt;&lt;/view&gt;     在 js 页面设置该函数 preventD: function() { retur...
微信小程序 - 解决弹框遮罩层的滚动穿透问题
qinnzheng
09-16 5586
小程序穿透
微信小程序：解决弹窗滚动穿透问题
weixin_70354927的博客
02-13 549
解决vantWeapp的van-popup组件滚动穿透问题
小程序的遮罩层弹框滚动穿透问题总结
lucky_oak的博客
11-18 802
小程序自定义弹框遮幕层，滑动的时候，遮挡的底层布局也会跟随滚动。查询到解决方案 链接 这种解决方式存在一个问题，底层滑动的位置会被重置。
微信小程序怎么解决弹框遮罩层出现滚动穿透问题
qq_58956810的博客
11-22 494
但是滚动穿透问题解决了，页面却触发不了触底更新加载数据，大概原因是.page页面设置了psoition:absolute;固定定位的盒子放在了scroll-view标签里面，也就相当于scroll-view来定位了，这些元素会在滑动页面时跟着滚动，而不是固定在屏幕上，所以只需要把position: fixed;‌：在position的元素上添加catch属性，并留空对应的函数，这样在滚动到最顶部或最底部时就不会影响页面的滚动‌。参考文档，看了一下，里面的其他方案也是可行的。
微信小程序防止弹框下面穿透滚动
最新发布
weixin_43923808的博客
03-13 406
【代码】微信小程序防止弹框下面穿透滚动。
微信小程序滑动窗口触控穿透问题解决
05-17
微信小程序中，滑动窗口触控穿透问题可以通过以下几种方式解决： 1. 使用`catchtouchmove`属性阻止触摸事件传递 在需要防止触摸事件穿透的元素上添加`catchtouchmove`属性，可以阻止触摸事件在该元素中传递。 例如： ```html <view catchtouchmove> <!-- 防止触摸事件穿透的元素内容 --> </view> ``` 2. 使用`catchtap`属性阻止点击事件传递 与`catchtouchmove`类似，使用`catchtap`属性可以阻止点击事件在该元素中传递。 例如： ```html <view catchtap> <!-- 防止点击事件穿透的元素内容 --> </view> ``` 3. 使用 `cover-view` 和 `cover-image` 组件 `cover-view` 和 `cover-image` 组件可以覆盖在其他组件上面，不会响应触摸事件，从而解决触控穿透问题。 例如： ```html <view> <!-- 需要防止触控穿透的元素 --> </view> <cover-view> <!-- 覆盖在上面的元素，不会响应触摸事件 --> </cover-view> ``` 以上是解决微信小程序滑动窗口触控穿透问题的几种方式，可以根据具体情况选择不同的方法进行解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值