uni-app页面mask遮罩层弹窗禁止页面滚动

最新推荐文章于 2024-06-19 20:49:16 发布
最新推荐文章于 2024-06-19 20:49:16 发布
阅读量2.1k 收藏 7
点赞数 1
分类专栏： uniapp 问题及解决方法专栏 前端 文章标签： 微信小程序 页面滚动 catchtouchmove 遮罩层 真机测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40146789/article/details/120747680
版权

实现：在遮罩层所在的view加上属性catchtouchmove="true"

代码：

<view class="dy-mask" catchtouchmove="true">
  <view class="dy-popup">
    <view class="fz-28 color-33 line-1">点击可以收藏关注</view>
    <view class="fz-28 color-0F4C8E line-1">我知道了</view>
  </view>
</view>

注意点：加上该属性后，在微信小程序开发工具上没效果，依然可以滚动，真机上有效果，页面不会滚动。

记录于2021-10-13.

今天超市大减价
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp弹出框_uni-app实现弹窗遮罩
weixin_39626211的博客
12-22 6736
{{content}}import Utils from‘@/common/js/center.js‘;exportdefault{props: [‘content‘],data() {return{isShowDialog:false, //整个弹窗isShowMaskContent: false, //白色填充区域}},methods: {dialogClose() {let that= th...
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
uniapp 小程序 mask压屏 禁止内容滚动条滚动
weixin_44167504的博客
03-25 1038
uniapp 小程序 mask压屏 禁止内容滚动条滚动 1、添加方法 @touchmove.stop.prevent=“moveHandle” <u-popup ref="upop" mode="right" width="80%" :mask-close-able="false" @touchmove.stop.prevent="moveHandle">... method:{ moveHandle()}{} } 2、添加css :class="mask ? ‘tl-show’: ‘
uniapp u-popup封装弹框背景滚动/滚动穿模
最新发布
weixin_45811884的博客
06-19 302
【代码】uniapp u-popup封装弹框背景滚动/滚动穿模。
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）
记笔记
08-16 2057
uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）在微信小程序、App 平台，页面内需要特殊处理一下滚动穿透，在页面顶部添加一个page-meta组件动态修改页面样式。
实现uniapp遮罩层
Rome_z的博客
11-23 2576
首先uniapp没有官方的遮罩层mask组件， 需要手搓一个。1.遮罩层中经常要显示东西，此时点击显示内容区域也会关闭遮罩层。通过isshowmask控制遮罩层的显示。2.遮罩层下方的页面内容依旧可以点击和滑动。介绍 | uni-app官网。
uniapp遮罩_uni-app 遮罩模板
weixin_42592399的博客
12-24 2142
1. common新建mask.vue文件。export default {}.cpt-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #000000;opacity: 0.5;z-index: 99;}2. 引入mask.vue文件。 // 关闭遮罩点击显示遮罩 import Mas...
基于UNI-APP的仿转转二手市场APP页面模板
02-23
总之，"基于UNI-APP的仿转转二手市场APP页面模板"是一个实用的开发资源，它结合了UNI-APP的跨平台能力和转转APP的成功设计经验，为开发者提供了构建二手市场应用的便捷途径。通过学习和利用这个模板，开发者可以更快...
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
uni-app禁止在popup组件中的内容滑动/滚动时触发遮罩层下面的页面滚动
lingliu0824的博客
02-24 3920
解决： 在popup组件的父组件中添加@touchmove.prevent 注意不是在popup组件中添加，而是在其父组件中添加
uni-app 禁止遮罩层下的页面滚动
学习路上的小刘
08-25 2004
1.需要禁止蒙版下的页面滚动 <view class="mask" @touchmove.stop.prevent="moveHandle"></view> /*这个view 是你的遮罩层*/ moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。 在js的方法中添加个空函数moveHandle moveHandle(){} ...
uniapp 禁止遮罩层下的页面滚动
UserGuan的博客
08-23 1644
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了，虽然在编译器上的滚轮依旧可以滚动，但真机环境下的手指滑动无法再触发。注意：如果使用 uview 之类的 ui 框架，@touchmove.stop.prevent 必须放在底层的 view 上面。
uniapp添加蒙版的时候怎么禁止页面滚动
陈小白
07-05 778
废话不多说 上代码 在对应的蒙版添加一个方法 可以是空方法 @touchmove.stop.prevent="moveHandle" //html <view class="screen" :style="{top : `${screenTop + CUSTOM_BAR_HEIGHT}px`,height : `${SCREEN_VIEW_HEIGHT - screenTop}px`}" v-show="screenVisable" @touchmove.stop.preven..
uniapp使用u-popup组件弹窗出现页面还可滑动
weixin_53339757的博客
01-31 2251
解决u-popup出现遮罩层页面滑动问题
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
热门推荐
qq_43807473的博客
05-10 2万+
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动
uni-app uni-popup弹起后,页面会滚动的问题
加班可以,无偿加班不行
02-23 934
uni-popup 并不能,完全阻止页面滚动，可在打开 uni-popup 的时候手动去做一些处理，禁止页面滚动,禁止页面滚动
uniapp 遮罩层滚动穿透
qq_41209042的博客
04-18 1069
使用uView的u-popup弹出层时，出现滚动穿透的现象，记录下解决方法。
uni-app实现弹窗遮罩
06-01
要在uni-app中实现弹窗遮罩，可以使用uni-popup组件。该组件可以在弹出时覆盖整个页面，形成遮罩效果。具体实现步骤如下： 1. 在需要使用弹窗的页面引入uni-popup组件： ``` <template> <uni-popup ref="popup" :show="showPopup" :overlay="true" :position="position" :duration="duration" @maskClick="hidePopup" > <!-- 弹窗内容 --> </uni-popup> </template> <script> import uniPopup from '@/components/uni-popup/uni-popup.vue' export default { components: { uniPopup }, data() { return { showPopup: false, position: 'bottom', duration: 300 } }, methods: { showPopup() { this.showPopup = true }, hidePopup() { this.showPopup = false } } } </script> ``` 2. 在需要触发弹窗的元素上添加点击事件，调用showPopup方法显示弹窗： ``` <template> <view class="btn" @click="showPopup">点击弹出弹窗</view> </template> ``` 这样就可以在uni-app中实现弹窗遮罩效果了。需要注意的是，uni-popup组件还有很多参数可以配置，可以根据具体需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值