微信小程序,uni-app阻止滚动事件或悬浮按钮拖动事件穿透(事件穿透)

阻止滚动事件穿透的应用场景

**【场景一】**在开发中遇到这样一个需求,在页面中添加一个仿苹果的拖动悬浮按钮,但是在长页面中,当拖动悬浮按钮时,长页面也会随之滚动。因此需要组织悬浮按钮上的touchmove事件穿透。
**【场景二】**有时候我们需要在页面中弹出一个弹窗,在弹窗弹出后需要禁止原页面继续滚动。

阻止滚动事件穿透的方法

【方法一】 在顶层元素中加上属性catchtouchmove;见下面代码

<view  catchtouchmove>   这里是我的悬浮窗 </view>

但是这种方法会导致小程序后台报错误提示:does not have a method “true” to handle event “touchmove”.
如果是通过uni-app编译成APP,则app端会报错误提示:app警告:
Do not have false handler in current page: pages/tabbar/tab1/tab1. Please make sure that false handler has been defined in pages/tabbar/tab1/tab1, or pages/tabbar/tab1/tab1 has been added into pages.json
【方法二】 在顶层元素中加上@touchmove.stop.prevent = "doNothing"见下面代码

<view @touchmove.stop.prevent = "doNothing" > 这里是我的悬浮窗  </view>    

doNothing:function(){},              //methods

使用方法二能有效阻止滚动事件穿透,且微信小程序不报错(APP端未测试)。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐