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

原创 已于 2022-06-02 10:13:01 修改 · 887 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

于 2022-05-31 14:11:43 首次发布

第一种

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

代码

<view catchtouchmove='false'>
	<scroll-view scroll-y>
		<!-- 内容-->
	</scroll-view>
最低0.47元/天 解锁文章
小程序页面滚动穿透
wei
06-26 5676
小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个Modal层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示
解决微信小程序自定义弹窗滚动穿透问题
aaa123aaasqw的博客
05-30 1741
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序滑动穿透解决方案
yuzhou blog
06-15 3654
微信小程序滑动穿透解决方案
解决微信小程序中的滚动穿透问题
12-13
总之，解决微信小程序中的滚动穿透问题，关键在于阻止不必要的滚动事件，并根据实际场景灵活调整元素的定位和滚动行为。通过这种方式，可以显著提升用户体验，避免内容在不应滚动时产生滚动现象。对于遇到此类问题的...
微信小程序解决滚动穿透
m0_50005691的博客
05-30 818
解决微信小程序滚动穿透问题多种情况
微信小程序滑动穿透问题解决
睡不够
11-02 856
微信小程序滑动穿透问题解决 在弹出部分的wxml代码上加catchtouchmove="true"可解决滑动穿透问题 <!-- 弹出窗 --> <view class="pop" catchtouchmove="true"></view>
微信小程序 -解决弹窗滚动穿透问题
weixin_41195867的博客
12-03 1625
微信小程序 用fixed设置弹窗蒙层，当弹窗和内容都存在滚动时，滑动弹窗蒙层，下面的页面会有滚动。 希望的效果是弹窗内能正常滚动，滑动弹窗蒙层，下面页面不会产生滚动。 例如：页面上内容也有滚动，弹窗里有展示许多部分内容，需要滚动浏览。 代码块：https://developers.weixin.qq.com/s/hfS1ljmt7NmG （滑动蒙层，下面的页面不会产生滚动，但是但是，弹窗里的内容滚动超级不好，滚动反应很迟钝，要划4~5次才能滑动内容） modal.wxml <view catchtou
如何彻底解决微信小程序滚动穿透问题
qq_31699019的博客
03-02 4184
前言：我们在开发业务的过程中总会有各种样式的弹窗需求，在弹窗弹起来的时候，底部的内容却可以滚动，刚开始我们使用catchtouchmove解决了，但是在复杂一点的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。 使用官方的page-meta组件，这里贴下官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 通过该组件我们可以直接操作Page组件 ，我们给它的wxss样式overflow动态设置
微信小程序遮罩层滚动穿透的问题 滑动到底的时候整个页面动起来了
qq_27806371的博客
01-30 740
常见的布局 外层一个遮罩层 里面一层是弹窗以及内容 这里还是个textarea 滚动到底的时候 底部的遮罩层也跟着滚动了 叫滚动穿透 处理方法是添加page-meta
微信小程序：解决弹窗滚动穿透问题
最新发布
weixin_70354927的博客
02-13 687
解决vantWeapp的van-popup组件滚动穿透问题
微信小程序弹出框滚动穿透问题
caoyuna1998的博客
07-07 1067
1.在你的遮罩层最外层加 catchtouchmove=“noneEnoughPeople” 里面是你的方法名 2.noneEnoughPeople: function () { console.log('遮罩层禁止页面滑动') },
微信小程序弹窗滚动导致页面穿透问题的解决办法
leiwenen的博客
04-28 6380
最近在做小程序，由于小程序提供的弹窗样式有限，我们通常会自定义弹窗组件（我都是在弹窗蒙层上加了catchtouchmove="true",保证最基本的穿透问题但是解决不了弹窗内容区域需要滚动的情况），那么就会导致页面穿透问题，具体表现有手指上下滑动弹窗部分，底部页面也同时滑动、如果配置了onPullDownRefresh页面刷新则页面刷新也会触发，我的解决过程如下： 1.最简单的想法： 最开始...
微信小程序怎么解决弹框遮罩层出现滚动穿透问题
qq_58956810的博客
11-22 547
但是滚动穿透问题解决了，页面却触发不了触底更新加载数据，大概原因是.page页面设置了psoition:absolute;固定定位的盒子放在了scroll-view标签里面，也就相当于scroll-view来定位了，这些元素会在滑动页面时跟着滚动，而不是固定在屏幕上，所以只需要把position: fixed;‌：在position的元素上添加catch属性，并留空对应的函数，这样在滚动到最顶部或最底部时就不会影响页面的滚动‌。参考文档，看了一下，里面的其他方案也是可行的。
微信小程序swiper禁止左右横划切换swiper-item
m0_58889179的博客
01-31 1923
在上设置catch:touchmove拦截，然后在其中嵌套使用，此时左右滑动和scroll-view中的上下滑动都是不行的，需要设置的高度，然后swiper-item 与 scroll-view及其中间的view都需要设置高度为100%，即可完成禁止左右滑动，允许内容上下滑动的效果。
微信小程序滑动窗口触控穿透问题解决
05-17
微信小程序中，滑动窗口触控穿透问题可以通过以下几种方式解决： 1. 使用`catchtouchmove`属性阻止触摸事件传递 ...以上是解决微信小程序滑动窗口触控穿透问题的几种方式，可以根据具体情况选择不同的方法进行解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值