微信小程序,uni-app阻止滚动事件或悬浮按钮拖动事件穿透(事件穿透)
微信小程序,uni-app阻止滚动事件或悬浮按钮拖动事件穿透(事件穿透)阻止滚动事件穿透的应用场景**【场景一】**在开发中遇到这样一个需求,在页面中添加一个仿苹果的拖动悬浮按钮,但是在长页面中,当拖动悬浮按钮时,长页面也会随之滚动。因此需要组织悬浮按钮上的touchmove事件穿透。**【场景二】**有时候我们需要在页面中弹出一个弹窗,在弹窗弹出后需要禁止原页面继续滚动。阻止滚动事件穿透...
微信小程序,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端未测试)。
更多推荐
所有评论(0)