uniapp 禁止遮罩层下的页面滚动

使用 @touchmove.stop.prevent="toMoveHandle" 事件修饰符

若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了,虽然在编译器上的滚轮依旧可以滚动,但真机环境下的手指滑动无法再触发。

为兼容各端,事件需使用 @ 的方式绑定,请勿使用小程序端的 bind 和 catch 进行事件绑定;也不能在 JS 中使用 event.preventDefault() 和 event.stopPropagation() 方法。

注意:如果使用 uview 之类的 ui 框架,@touchmove.stop.prevent 必须放在底层的 view 上面。由于大部分的 ui 框架结构复杂,很容易不生效,建议自己写一个遮罩层再加上这个事件,这样的话就能正常生效了。

html 复制代码
<!-- 弹窗 -->
<view class="pop-box" @touchmove.stop.prevent="toMoveHandle">
    
</view>
javascript 复制代码
toMoveHandle() {},

更多可参考:介绍 | uni-app官网

相关推荐
大家的林语冰17 小时前
👍 尤大重学 Webpack,Vite 8.1 再进化,打包模式复活!
前端·javascript·vite
张元清17 小时前
React useIsomorphicLayoutEffect:修掉 SSR 下的 useLayoutEffect 警告(2026)
前端·javascript·面试
PBitW17 小时前
直接让GPT每日训练我!!!😕😕😕
前端·javascript·面试
爱勇宝17 小时前
我给自己做了一个新标签页:不登录、不打扰、打开就能用
前端·html·浏览器
用户2986985301418 小时前
Java 实现 Word 文档文本查找与高亮标注
java·后端
Ausra无忧18 小时前
记录在公司把单服务器升级成多服务器架构流程
前端·后端·架构
宇宙之一粟18 小时前
乐企版式文件生成平台
java·后端·python
极客密码18 小时前
来看看我用Codex两周时间vibe coding的这款轻量级的剪贴板管理应用,win/mac系统均可用
前端·ai编程·vibecoding
前端双越老师18 小时前
Agent 实战: 智语 + baoyu-skills 自动发布文章到公众号
前端·agent·全栈
hunterandroid19 小时前
Jetpack Compose 入门:用声明式 UI 写 Android 页面
前端