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

相关推荐
shuair1 小时前
idea 2023.3.7常用插件
java·ide·intellij-idea
小安同学iter2 小时前
使用Maven将Web应用打包并部署到Tomcat服务器运行
java·tomcat·maven
Yvonne9782 小时前
创建三个节点
java·大数据
天宇&嘘月2 小时前
web第三次作业
前端·javascript·css
小王不会写code3 小时前
axios
前端·javascript·axios
不会飞的小龙人3 小时前
Kafka消息服务之Java工具类
java·kafka·消息队列·mq
是小崔啊3 小时前
java网络编程02 - HTTP、HTTPS详解
java·网络·http
brevity_souls4 小时前
Spring Boot 内置工具类
java·spring boot
发呆的薇薇°4 小时前
vue3 配置@根路径
前端·vue.js
小钊(求职中)4 小时前
Java开发实习面试笔试题(含答案)
java·开发语言·spring boot·spring·面试·tomcat·maven