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官网

相关推荐
_code_bear_5 分钟前
OpenSpec CLI 与 OPSX 工作流说明
前端·后端·架构
阿旭超级学得完17 分钟前
C++11包装器(function和bind)
java·开发语言·c++·算法·哈希算法·散列表
parade岁月31 分钟前
开源一个 Vue 3 Table:API 学 antdv、主题学 Nuxt UI
前端·vue.js
JiaWen技术圈35 分钟前
Web 安全深入审计检查清单
前端·安全
江米小枣tonylua44 分钟前
从红绿灯到方向盘:TDD 在 AI 时代的新角色
前端·设计模式·ai编程
祀爱1 小时前
Asp.net core+ Layui 项目中编辑按钮传递数据的方法
前端·c#·asp.net·layui
掉鱼的猫1 小时前
Spring AI 2.0 GA 倒计时:先别急,来看看 Java AI 框架的另一条路
java·openai·agent
Refrain_zc1 小时前
Android 应用内 APK 安装全方案:从静默安装到普通安装的详解
java
DanCheOo1 小时前
Prompt 工程化管理:从散落在代码里到版本化、可测试、可回滚
前端·ai编程