【实用】小程序弹层滚动穿透解决方法

最新推荐文章于 2024-05-30 10:46:37 发布
最新推荐文章于 2024-05-30 10:46:37 发布
阅读量620 收藏
点赞数
分类专栏： 问题解决 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38211443/article/details/121825186
版权

1. @touchmove.stop.prevent

但是不适用于弹窗内也有滚动的情况，会导致弹窗内也无法滚动。

2. page-meta 微信小程序组件

page-meta | 微信开放文档

通过page-meta 我们可以直接操作page组件，给他的overflow设置hidden/visible/auto来控制页面的滚动

<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />

需注意：page-meta需要放在页面的第一个节点！！

旺仔流奶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序 弹出层 禁止页面滚动
web全栈开发的博客
08-08 734
解决办法： 在弹出层上添加 catchtouchmove=’true’ <view class="sh_Model_box" catchtouchmove='true'> ... </view> 注意：如果开发工具的模拟器上没有效果，真机测试，真机上有效果 查看微信面试题小程序，面试更简单 ...
VUE_uni-app禁止遮罩弹窗下的页面滚动的完美解决办法
小歪博客
12-21 4243
写法一：在弹窗外层添加：@touchmove.stop.prevent="()=>false" 写法二：在弹窗外层添加： @touchmove.prevent <template> <view> <view v-for="(item,i) in 100" :key="i">list</view> <view class="Popup" @touchmove.prevent> <view class="Popup_"&gt
解决微信小程序自定义弹窗滚动穿透问题
最新发布
aaa123aaasqw的博客
05-30 335
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
小程序css实现遮罩弹出层
01-20
小程序中用css实现遮罩弹出层
微信小程序弹出框竖向滚动_微信小程序 弹出遮罩层滚动 禁止底层滚动问题
weixin_39805529的博客
02-12 234
思路：底层不用管，在遮罩层view添加，遮罩层文字滚动模块用scrollview组件。wxml：详情关闭门店药房宁夏路01号门店、药房宁夏路02号门店、药房宁夏路03号门店、药房宁夏路04号门店js：data: {// 一开始遮罩层与面板隐藏shows: false,},// 点击整个view弹出遮罩层checkclick: function (e) {var that=this;that.set...
解决小程序弹出层滚动穿透的问题
weixin_30907935的博客
05-14 94
今天在做小程序的时候，遇到了一个棘手的问题，那就是弹出层的滚动穿透，即弹出层滚动，那么被弹出层覆盖的下面的内容区域也会进行滚动,这一点就很麻烦了。弹出层我是用的view标签然后使用的position:fixed进行的定位；说一下我的解决思路: 一：当弹出层里面无滚动的时候： 可以在遮罩的view标签上定义一个防止事件冒泡的方法： catchtouchmove="preventD"； ...
小程序弹出层禁止列表滑动_小程序解决自定义弹出层滑动时下层页面滚动问题--穿透问题...
weixin_36304957的博客
01-14 350
一、问题描述小程序自带弹框满足不了某些需求，为此则需要设置自定义弹框，但是问题来了，在滑动弹层的时候，弹层页面会随着弹层底部的滚动条滚动二、解决办法在弹出层加上 catchtouchmove 事件- 如果弹层里的内容需要滚动则需要使用scroll-view组件原理：弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动，但是如果弹窗元素设置了该属性...
支付宝小程序modal弹窗——滚动穿透与滚动溢出
Kaite_han的博客
04-06 2302
滚动穿透 问题描述： 在移动端开发模态框时（小程序也会出现），当模态框下的页面超过一屏时，在fixed定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滑动，看起来好像事件穿透到了下面的DOM元素一样，我们类比点击穿透，姑且称他为滚动穿透。 问题原因： 通过事件的表象，可以推测是文档的滚动事件被触发了，那我们就禁用滚动事件就好办了。 案例伪代码： 解决方案✅ e.preventDefault() 小程序——脚本语法，通过e.preventDefault()阻止元素的touch-move事件。（H5同理
解决微信小程序中的滚动穿透问题
12-13
总之，解决微信小程序中的滚动穿透问题，关键在于阻止不必要的滚动事件，并根据实际场景灵活调整元素的定位和滚动行为。通过这种方式，可以显著提升用户体验，避免内容在不应滚动时产生滚动现象。对于遇到此类问题的...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
01-20
总的来说，微信小程序的`scroll-view`滚动穿透和阻止滚动是开发者在实现交互效果时经常遇到的问题。通过合理设置`catchtouchmove`属性和动态调整页面样式，可以缓解这一问题，但仍有待优化。随着微信小程序框架的...
解决支付宝小程序uview组件u-popup遮罩滚动穿透问题
StayInCat的博客
04-19 4379
uni-app、u-popup、遮罩滚动穿透
微信小程序开发 遮罩层弹出框
04-03
微信小程序开发遮罩层弹出框的实现，简单实现，点击弹出遮罩，类似弹出框
解决Taro在支付宝小程序中阻止滚动穿透的问题，钉钉小程序阻止滚动穿透
m0_57261384的博客
11-23 721
问题描述：在支付宝小程序真机预览中，使用 Picker 选择器的时候，滑动其中的滚动项，因为冒泡事件的原因会触发外层盒子的滚动，试过阻止冒泡事件，没用，样式阻止外层滚动也没用
记录一次小程序滚动穿透解决方案
qq_45246017的博客
01-20 122
场景描述： 自定义的小程序弹窗中存在列表滚动，手机操作时发现有滚动穿透现象 个人觉得一个比较好用的方法====》： 底层页面使用scroll-view组件包裹，设置垂直滚动，高度设置为屏幕高度，这样弹框自身内容可以滚动并且不会影响到底层页面 <scroll-view scroll-y style="height:{{windowHeight}}px">底部页面</scroll-view> <view>自定义弹窗部分</view> on.
微信小程序，uni-app阻止滚动事件或悬浮按钮拖动事件穿透（事件穿透）
云间月
09-10 1万+
微信小程序，uni-app阻止滚动事件或悬浮按钮拖动事件穿透（事件穿透） 阻止滚动事件穿透的应用场景 **【场景一】**在开发中遇到这样一个需求，在页面中添加一个仿苹果的拖动悬浮按钮，但是在长页面中，当拖动悬浮按钮时，长页面也会随之滚动。因此需要组织悬浮按钮上的touchmove事件穿透。 **【场景二】**有时候我们需要在页面中弹出一个弹窗，在弹窗弹出后需要禁止原页面继续滚动。 阻止滚动事件穿透...
遮罩层出现后不能滚动 添加事件@touchmove.prevent 移动端中的坑和 vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
乔的博客
03-08 1073
是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行。-.self 只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。：是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件。：是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号。：是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式。
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
热门推荐
qq_43807473的博客
05-10 2万+
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动
微信小程序uni-popup弹框内 使用overflow：scroll 失效
qq_42702425的博客
04-29 3158
项目场景： 开发微信小程序过程中，需要实现弹框设置最大高度，下图红框中内容可滚动查看； 问题描述 刚开始实现方法 给外层盒子设置最大高度 max-height: 600rpx;overflow:hidden; 滚动的盒子设置 overflow：scroll; 结果发现 overflow：scroll 失效了 查询文档得知，是因为 uni-popup最外层设置了默认值 @touchmove.stop.prevent=“clear”，禁止内部滑动，导致的滑动没有效果 解决方案： 给外层盒子 设置
记录bug以及修复过程-uniapp touchmove使用stop.prevent后touchmove事件失效
qq_65839745的博客
05-21 683
写uniapp的时候用到了ucharts的折线图，这个折线图我是放在component里面作为组件调用的，但是我调用的位置又是在swiper里面，那么问题来了，两个组件都具有横向的touchmove事件，这就需要使用到事件冒泡了，随后进入ucharts内修改源码。然后我就想既然是事件冒泡，那么就是一层层往上走的触发链，我需要保证我下层的盒子可以触发但是上层的盒子不能触发，那么最简单粗暴的就是中间加一层可以拦截该事件的盒子就行了，正好上述文献中提到需要加一个scroll-x的scroll盒子，于是就有了。
微信小程序滑动窗口触控穿透问题解决
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、付费专栏及课程。

余额充值