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

已于 2022-06-02 10:13:01 修改
阅读量833 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序
于 2022-05-31 14:11:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/125064701

第一种

  • 弹窗外层禁用滑动事件
  • 弹窗中的滑动部分使用用scroll-view

代码

<view catchtouchmove='false'>
	<scroll-view scroll-y>
		<!-- 内容-->
	</scroll-view>
</view>

第二种 通过个最外层设置overflow 禁止滚动 具体如下

传送门

【微信小程序】10分钟搞懂微信小程序slider滑动选择器组件，你也可以成为高手
java专栏
11-26 941
通过以上详细的介绍，相信你已经对微信小程序中的slider滑动选择器组件有了全面的了解。slider组件不仅可以帮助用户通过滑动来选择数值，还能通过自定义样式和事件绑定，让我们的小程序更加灵活和有趣。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。
微信小程序 -解决弹窗滚动穿透问题
weixin_41195867的博客
12-03 1569
微信小程序 用fixed设置弹窗蒙层，当弹窗和内容都存在滚动时，滑动弹窗蒙层，下面的页面会有滚动。 希望的效果是弹窗内能正常滚动，滑动弹窗蒙层，下面页面不会产生滚动。 例如：页面上内容也有滚动，弹窗里有展示许多部分内容，需要滚动浏览。 代码块：https://developers.weixin.qq.com/s/hfS1ljmt7NmG （滑动蒙层，下面的页面不会产生滚动，但是但是，弹窗里的内容滚动超级不好，滚动反应很迟钝，要划4~5次才能滑动内容） modal.wxml <view catchtou
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决微信小程序自定义弹窗滚动穿透问题
记录本人工作中遇到的问题、经验总结以及分享。
05-31 5144
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。当出现弹窗时，为wxml最外层元素动态添加fixed类。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。可以实现弹框背景不滚动，但是。也会导致弹框自身无法滚动。
微信小程序解决滚动穿透
m0_50005691的博客
05-30 771
解决微信小程序滚动穿透问题多种情况
微信小程序滑动穿透解决方案
yuzhou blog
06-15 3572
微信小程序滑动穿透解决方案
解决微信小程序中的滚动穿透问题
12-13
总之，解决微信小程序中的滚动穿透问题，关键在于阻止不必要的滚动事件，并根据实际场景灵活调整元素的定位和滚动行为。通过这种方式，可以显著提升用户体验，避免内容在不应滚动时产生滚动现象。对于遇到此类问题的...
微信小程序滑动穿透问题解决
睡不够
11-02 846
微信小程序滑动穿透问题解决 在弹出部分的wxml代码上加catchtouchmove="true"可解决滑动穿透问题 <!-- 弹出窗 --> <view class="pop" catchtouchmove="true"></view>
小程序页面滚动穿透
wei
06-26 5540
小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个Modal层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示
微信小程序遮罩层滚动穿透的问题 滑动到底的时候整个页面动起来了
qq_27806371的博客
01-30 657
常见的布局 外层一个遮罩层 里面一层是弹窗以及内容 这里还是个textarea 滚动到底的时候 底部的遮罩层也跟着滚动了 叫滚动穿透 处理方法是添加page-meta
微信小程序：解决弹窗滚动穿透问题
最新发布
weixin_70354927的博客
02-13 446
解决vantWeapp的van-popup组件滚动穿透问题
微信小程序弹出框滚动穿透问题
caoyuna1998的博客
07-07 1038
1.在你的遮罩层最外层加 catchtouchmove=“noneEnoughPeople” 里面是你的方法名 2.noneEnoughPeople: function () { console.log('遮罩层禁止页面滑动') },
微信小程序怎么解决弹框遮罩层出现滚动穿透问题
qq_58956810的博客
11-22 451
但是滚动穿透问题解决了，页面却触发不了触底更新加载数据，大概原因是.page页面设置了psoition:absolute;固定定位的盒子放在了scroll-view标签里面，也就相当于scroll-view来定位了，这些元素会在滑动页面时跟着滚动，而不是固定在屏幕上，所以只需要把position: fixed;‌：在position的元素上添加catch属性，并留空对应的函数，这样在滚动到最顶部或最底部时就不会影响页面的滚动‌。参考文档，看了一下，里面的其他方案也是可行的。
微信小程序swiper禁止左右横划切换swiper-item
m0_58889179的博客
01-31 1704
在上设置catch:touchmove拦截，然后在其中嵌套使用，此时左右滑动和scroll-view中的上下滑动都是不行的，需要设置的高度，然后swiper-item 与 scroll-view及其中间的view都需要设置高度为100%，即可完成禁止左右滑动，允许内容上下滑动的效果。
微信小程序如何阻止滚动穿透事件
m0_69301850的博客
11-07 764
底层是页面，页面上层是一个透明蒙版，我们想要的效果是：在蒙版上滚动时无效的，但实际是滚动蒙版的时候、页面也在跟着滚动。
微信小程序滑动窗口触控穿透问题解决
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、付费专栏及课程。

余额充值