uniapp 禁止下层滚动穿透

已于 2023-06-14 11:08:56 修改
阅读量223 收藏
点赞数
分类专栏： uniapp 文章标签： uni-app
于 2023-06-14 10:57:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60218525/article/details/131203492
版权
文章提到，在uni-popup组件内，通过添加@touchmove.stop.prevent=moveHandle事件监听器，并在moveHandle方法中编写空方法，可以有效地阻止touchmove事件的默认行为，确保uni-popup的正常工作。
摘要由CSDN通过智能技术生成

一定要写在uni-popup 里面才有效

@touchmove.stop.prevent="moveHandle"，在事件里面写个空的方法即可

番茄和鸡蛋的故事
关注
专栏目录
uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华）
Syleapn的博客
10-30 1万+
在uni-app中，弹窗的用途很常见，比如商品规格选取、广告弹窗等。在实际开发中，有时候我们需要在页面中有这样一个弹窗，但弹窗会导致触摸穿透的问题。这样带来的效果很不好，所以，在进行手动滑动时，我们需要在弹窗弹出后禁止原页面继续滚动。 一、解决触摸穿透的方法： 在网上看到最多用的方法是：在最外层的view上添加如下代码： <view class="" @touchmove...
Vue项目移动端滚动穿透问题的实现
10-15
这个问题指的是用户在页面某一层级（如导航栏、侧滑菜单）进行滚动操作时，滚动事件会穿透到页面的下一层级，导致下层内容也跟着滚动。这会影响用户体验，因此需要对其进行处理。本文将详细介绍如何在Vue项目中解决...
小程序显示弹窗时禁止下层的内容滚动实现方法
10-17
主要介绍了小程序显示弹窗时禁止下层的内容滚动实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uni 防止滚动穿透
最新发布
weixin_42212220的博客
05-11 395
场景：设置遮罩层或者弹窗的时候经常会遇到底层页面会跟着滑动的情况，把page-meta设置在最外层就可以了，等遮罩层弹出的时候就阻止了下层页面的滚动。
uni-app实现禁止弹出框滚动穿透
qq_31647491的博客
10-14 3618
在uni-app开发中，经常会使用弹出框、遮罩层以及日期选择器等组件，但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时，继续滑动会导致底层页面的滚动，这可能会影响用户体验。
解决uni-popup禁止滚动穿透
Girasoles的博客
04-10 1431
当滚动弹窗的时候，也会滚动弹窗下的页面，设置了page-meta无效，用下面这种方法解决了。clear写一个空方法即可。
uniapp H5的弹窗滚动穿透解决
每天都要努力学习哦~~
04-22 2093
有一层遮罩蒙层覆盖在body上时，当我们滚动，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
uniapp 遮罩层 滑动 穿透
qq_48596260的博客
09-20 318
uniapp H5在需要出 遮罩层会出现滑动穿透。导致出现bug。解决方法，禁止用户滑动。从解决bug.
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
01-20
这个属性的作用是捕获触摸移动事件，当设置为`true`或绑定一个空方法时，可以阻止事件穿透到下层元素。例如： ```html <view catchtouchmove="doNothing"></view> ``` 或者简化写法： ```html ...
对vue中的事件穿透与禁止穿透实例详解
10-16
有时候，我们可能会遇到事件穿透的问题，即在页面上层的元素被点击时，同时也触发了下层元素的事件。这主要是因为浏览器默认的行为，事件会从捕获阶段开始，一直传递到冒泡阶段。Vue.js 提供了优雅的方式来解决这个...
uniapp 解决滑动穿透 （模态滚动影响页面滚动）
^_^
03-31 6027
在平常写一些小程序时，避免不了有一些设计是在弹层上面操作的，也避免不了设计的原型上面的模态可以滑动，这时候就会出现一个滚动穿透的问题。 解决方案 <view class="mask" @touchmove.stop.prevent="moveHandle"></view> methods:{ moveHandle(){ return true }, } 此方法 只能解决 不触发页面底部的滚动 如果在模态上面有列
uni-app踩坑 - 模态框modal禁止滑动、禁止点击
PrisonersDilemma的博客
09-30 3726
话不多说，贴代码： <view class="my-modal" @touchmove.stop.prevent="preventHandler"> <view>...</view> </view> export default { methods: { preventHandler() { return } } } ...
uniapp中view滑动穿透解决方案
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
07-24 356
【代码】uniapp中view滑动穿透解决方案。
（转）uni-app 阻止点击事件冒泡
CaseyWei
04-27 6115
阻止冒泡事件 在使用Uniapp编写的过程中写弹窗时会发现，你给背景设置了点击收起弹窗的状态又给弹窗中提交事件设置了关闭的状态，会发现事件还没执行完弹窗就被收起，很苦恼，但是官方给我们提供了一种全端都使用的阻止冒泡事件: 官方地址： https://uniapp.dcloud.io/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8阻止冒泡...
【问题解决】uniapp-Vue3中u-popup滑动页面穿透问题
z914020826的博客
08-13 2001
在我们用uniapp写小程序或者APP的时候，有时候会用到一些弹出框组件。但在弹出框内部滑动会引起整个页面的滑动，让整个页面看起来不是和很好。
解决uniapp u-modal中有列表的滑动穿透问题
m0_66694207的博客
04-12 489
页面中有一个弹窗 弹窗中有一个可以滑动的列表。在APP.vue全局中 加入一个属性。滑动列表其他位置会有滑动穿透问题。
uniapp 阻止事件冒泡 两层点击
MELANCHOLY ❤ ◁ ❚❚ ▷
06-23 2632
uniapp中禁止 在这里插入代码片
uniapp H5的弹窗滚动穿透解决(uni-data-picker组件的滚动穿透)
peachban的博客
11-09 2344
滚动穿透即：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动。默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
uniapp 解决长按不松手还能穿透滑动的bug，解决双层弹出层层级问题
weixin_58018769的博客
02-22 1020
解决长按不松手还能穿透滑动的bug；解决长按事件和禁止触摸冲突，随便点到图标上滑动就会打开弹窗的bug；解决弹窗不覆盖，呈现叠层的bug
uniapp如何穿透
04-28
在UniApp中，穿透是指在组件上层的点击事件可以透过组件传递到下层的组件上。实现穿透的方式有两种： 1. 通过事件修饰符：在组件上绑定@click.stop修饰符，可以阻止点击事件冒泡，使得点击事件可以穿透到下层的组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值