小程序滑动穿透问题

最新推荐文章于 2025-03-13 18:51:27 发布

小糊涂加油

最新推荐文章于 2025-03-13 18:51:27 发布

阅读量325

点赞数

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

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

https://segmentfault.com/q/1010000011134345

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小糊涂加油

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决微信小程序自定义弹窗滚动穿透问题

aaa123aaasqw的博客

05-30

1584

在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。

微信小程序中滑动view视图的时候，里面的那个view也会跟着滑动，解决办法滚动穿透问题只需要在该页面js的onShow中加上wx.setPageStyle即可

番茄Salad

06-13

322

设置了z-index: 100;滑动view的时候，里面的那个view也会跟着滑动，view被穿透了，不知道是不是我布局的问题。。

参与评论您还未登录，请先登录后发表或查看评论

解决微信小程序中的滚动穿透问题

01-03

Mask-Scroll > 原码地址 * 蒙层防穿透问题 > 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候，手指滑动屏幕会出现底部内容也滑动的现象. 如图：当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。这就是蒙层穿透，也可以叫 ‘滚动穿透’. 当然出现这种情况，用户体验当然是不好的了。所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头…) ## 解决方案这种要分情况，当蒙层没有滚动条的时候。当蒙层出现滚动条的时候 1. 当弹窗没有滚动条的时候。直接监听 catch:touchmove 方法，然后直接返回就可以了。代码可以去看f

微信小程序滑动穿透解决方案

yuzhou blog

06-15

3588

微信小程序滑动穿透解决方案

小程序页面滚动穿透

wei

06-26

5557

小程序页面滚动穿透一、场景在项目当中，基础遇到这样的需求有一个长列表，或者其他可滚动展示的页面，在这个页面会弹出一个Modal层，如下：贝壳找房的的筛选栏二、问题如果这个弹框内容不可滚动，不会有太大问题；但是当弹出内容是可以滚动的时候，就会有问题，触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面，三、解决办法程序员是面向Google编程的，找到了下面的解决办法：监听弹框状态，如果弹框展示就给列表添加对应样式 // isShowMask 弹框是否展示

小程序滑动穿透问题处理

ITzhongzi的博客

06-04

467

滑动穿透描述当我们在弹出层或者模太框上滑动手指的时候，最底下的UI视图跟着滑动。解决方案在滑动的元素上加上一个空的滑动事件（万能方法） /*这是弹出层的盒子*/ <view catchtouchmove="touchmove"> </view> touchmove: function(){ }, 这样手指滑动就会触发这个滑动事件，而不会向上传导，导致滑动穿透。注意： 小程序提供bind 和 catch两种绑定事件方法，bind是会冒泡的，catch

微信小程序scroll-view实现滚动穿透和阻止滚动的方法

10-18

主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

小程序解决弹窗滑动穿透问题

为啥不能换名字的博客

08-13

889

## 解决方案 1.当弹窗没有滚动条的时候直接监听 catch:touchmove 方法，然后直接返回就可以了 <view catchtouchmove="{{preventTouchMove}}"></view> preventTouchMove(){ return } 2.当弹窗内容需要滚动的时候&&当前页面无需滚动如果你页面没有滚动条可以直接给当前页面最父级元素fixed定位一下或者overflow：hidden一下 3当弹窗内容需

小程序滚动穿透解决方案

ZionHH的博客

11-19

873

在遮罩层添加catchtouchmove <view class="modal-cover" catchtouchmove>  <scroll-view></scroll-view> </view> 在页面添加page-meta（文档） <page-meta page-style="{{showModal ? 'overflow: hidden' : ''}}" /&g.

小程序中的几种情况下滑动穿透解决方案

BetterGG的博客

08-02

7072

情景一：只要求滑动遮罩区域时，底部内容不可滚动在遮罩层设置 catchtouchmove 函数 <view class='{{cover}}' data-id='first' catchtouchmove="preventD"></view> 在 js 页面设置该函数 preventD: function() { retur...

微信小程序 - 解决弹框遮罩层的滚动穿透问题

qinnzheng

09-16

5565

小程序穿透

微信小程序：解决弹窗滚动穿透问题

weixin_70354927的博客

02-13

501

解决vantWeapp的van-popup组件滚动穿透问题

小程序的遮罩层弹框滚动穿透问题总结

lucky_oak的博客

11-18

797

小程序自定义弹框遮幕层，滑动的时候，遮挡的底层布局也会跟随滚动。查询到解决方案链接这种解决方式存在一个问题，底层滑动的位置会被重置。

微信小程序怎么解决弹框遮罩层出现滚动穿透问题

qq_58956810的博客

11-22

474

但是滚动穿透问题解决了，页面却触发不了触底更新加载数据，大概原因是.page页面设置了psoition:absolute;固定定位的盒子放在了scroll-view标签里面，也就相当于scroll-view来定位了，这些元素会在滑动页面时跟着滚动，而不是固定在屏幕上，所以只需要把position: fixed;‌：在position的元素上添加catch属性，并留空对应的函数，这样在滚动到最顶部或最底部时就不会影响页面的滚动‌。参考文档，看了一下，里面的其他方案也是可行的。

微信小程序防止弹框下面穿透滚动

最新发布

weixin_43923808的博客

03-13

396

【代码】微信小程序防止弹框下面穿透滚动。

小程序iphone蒙层滚动穿透

weixin_30724853的博客

05-28

352

如图，这个弹出层在滚动列表的时候，在iPhone上是会穿透导致页面也跟着滚动，所以这时不能用普通的view标签加scroll属性实现，看了下文档发现有专门的scroll-view组件，用该组件替换就可以了转载于:https://www.cnblogs.com/pjl43/p/10938104.html...

微信小程序滑动窗口触控穿透问题解决

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> ``` 以上是解决微信小程序滑动窗口触控穿透问题的几种方式，可以根据具体情况选择不同的方法进行解决。