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

这篇具有很好参考价值的文章主要介绍了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 框架结构复杂,很容易不生效,建议自己写一个遮罩层再加上这个事件,这样的话就能正常生效了。

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

更多可参考:介绍 | uni-app官网文章来源地址https://www.toymoban.com/news/detail-669000.html

到了这里,关于uniapp 禁止遮罩层下的页面滚动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【bug】vuxUI组件popup弹出框在IOS中遮罩层会遮住页面

    可以增加自定义方法v-transfer-dom transfer-dom’.js // Thanks to: https://github.com/calebroseland/vue-dom-portal

    2024年04月28日
    浏览(78)
  • vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

    报错信息: 原因: 当出现编译错误或警告时,在浏览器中显示全屏覆盖。 解决方法: 在vue.config.js中添加如下配置, 重启项目 即可 https://webpack.docschina.org/configuration/dev-server/#overlay

    2024年02月05日
    浏览(59)
  • element-ui dialog遮罩层在最上层,关掉dialog遮罩层还在

    代码中使用了dialog,dialog中点击某个按钮,又嵌套了一个dialog。 导致最外层的dialog出现后一直被遮罩层遮住,点击确定关掉dialog遮罩层还在。 element-ui的dialog组件有这几个参数:  其中,append-to-body 嵌套的dialog必须指定为true 加上后,遮罩层不再遮挡上层  

    2024年02月11日
    浏览(39)
  • 微信小程序实现一个遮罩层

    微信小程序实现遮罩层 开发中,遮罩层的使用场景很多,例如,loading的时候、例如搜索的时候等。 以下是一个案例:点击页面的搜索框,在页面上添加一层遮罩层,显示搜索详情页 页面搜索框如下: 页面最上面有一个搜索框,下面有一些其他UI元素 遮罩层 需求是,点击首

    2023年04月23日
    浏览(41)
  • 微信小程序弹出层弹出后禁止页面滚动

    1.用一个view标签把页面禁止滚动部分包裹,并添加自定义类名 初始值为空 2. 在弹出层打开是,改变变量的值 3.给isNoRoll设置样式

    2024年02月08日
    浏览(86)
  • 全局配置遮罩层(VUE Element Ui)

    组件中 index.js loadingConfig.js main.js之中,感觉不需要引,但是查的资料写了,先放着 request.js之中

    2024年02月11日
    浏览(38)
  • python实现刮刮乐(遮罩层也是图片)

    python实现刮刮乐(遮罩层也是图片) python实现刮刮乐效果,与普通刮刮乐有些不同,被刮掉的遮罩层是图片,当其被刮掉后,露下面的图片。在游戏循环中,监听鼠标移动事件,来模拟刮开效果。 效果图  Pygame是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础上

    2024年02月06日
    浏览(78)
  • 微信程序 自定义遮罩层遮不住底部tabbar解决

    一、先上效果 二 方法 1、自定义底部tabbar 实现: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 官网去抄 简单写下:在代码根目录下添加入口文件 除了js 文件的list 需要调整 其他原封不动 代码: js部分 json wxml wxss 2、 list 的中的页面 都需要在 onShow 中加入

    2024年02月12日
    浏览(52)
  • uni-app监听页面滚动

    在uni-app中可以通过监听页面滚动事件来实现滚动效果或响应滚动事件 在需要监听滚动的页面或组件中,添加一个 scroll 元素,用于容纳内容并实现滚动效果。 在页面或组件的方法中添加对应的滚动事件处理函数。

    2024年02月07日
    浏览(48)
  • el-dialog嵌套使用,只显示遮罩层的问题

    我是不建议嵌套使用的,平级也能调用,层级是按点击顺序的 这两个方法还是有用的,比如跳转其他页面保留el-dialog显示状态,可以使用 如果有用,请给我点赞收藏,我会很开心,谢谢

    2024年01月19日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包