小程序滑动穿透问题处理

最新推荐文章于 2024-11-22 12:00:48 发布
最新推荐文章于 2024-11-22 12:00:48 发布
阅读量467 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITzhongzi/article/details/106538545
滑动穿透描述

当我们在弹出层或者模太框上滑动手指的时候，最底下的UI视图跟着滑动。

解决方案
  1. 在滑动的元素上加上一个空的滑动事件（万能方法）
/*这是弹出层的盒子*/
<view  catchtouchmove="touchmove">
</view>

  touchmove: function(){
   
  },

这样手指滑动就会触发这个滑动事件，而不会向上传导，导致滑动穿透。

注意： 小程序提供bind 和 catch两种绑定事件方法，bind是会冒泡的，catch是在捕获阶段的事件，不会冒泡。 所以，我们一定要用catch绑定事件，不然还是不行。

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITzhongzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值