uniapp微信小程序遮罩层u-popup禁止底层穿透

最新推荐文章于 2025-10-09 08:34:07 发布

原创最新推荐文章于 2025-10-09 08:34:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

uniapp学习及经验专栏收录该内容

6 篇文章

订阅专栏

添加 @touchmove.prevent，遮罩层底部的页面就不会滑动了
微信开发者工具不生效，真机生效

<u-popup :show="showEwm" @close="closeEwm" mode="center" @touchmove.prevent>
  <view class="ewmshow">
    ················
  </view>
</u-popup>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

步步生花@苏殿主

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。

qq_43807473的博客

05-10

3万+

uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动

uniapp项目打包的微信小程序，设置uni-popup type=“bottom“时，底部有空隙

2023年最新地推相关信息

05-14

510

看代码中有一个paddingBottom 设置，有一个 this.safeAreaInsets + 'px'，检查多次代码，都是正常没有问题，样式设置也没有问题，在H5环境展示没有问题，只存在与微信小程序真机环境。uniapp项目打包的微信小程序，设置uni-popup type="bottom"时，底部有空隙。unia-popup中的源码中有PopUp 弹出层 bottom 底部弹出，全局查找bottom。调试也没有看到有空隙位置的设置高度，只能去看uni-popup的源码了。排除自己写的代码的问题。

1 条评论您还未登录，请先登录后发表或查看评论

uniapp遮罩_uni-app 遮罩模板

weixin_42592399的博客

12-24

2297

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弹层遮罩难题？看我如何见招拆招！

10-09

329

最近在uni-app项目中，我遇到了一个典型的z-index层级问题：弹窗组件明明设置了最高层级，却被其他元素覆盖。经过一番排查，终于找到了问题的根源和解决方案，今天就来分享这个“捉虫”经历。

uniapp实现一个遮罩层

weixin_45932157的博客

07-10

9624

.mark{ position:absolute; height: 500rpx; color: #fff; background: rgba(0, 0, 0, 0.5); left: 0%; right: 0%; margin-top: -500px; font-size: 26rpx; text-align: center; box-shadow: 2px -3px 100px -5px #FFFFFF;.

实现uniapp遮罩层

Rome_z的博客

11-23

4378

首先uniapp没有官方的遮罩层mask组件，需要手搓一个。1.遮罩层中经常要显示东西，此时点击显示内容区域也会关闭遮罩层。通过isshowmask控制遮罩层的显示。2.遮罩层下方的页面内容依旧可以点击和滑动。介绍 | uni-app官网。

uniapp H5遮罩层，弹窗，蒙层滚动穿透/滑动穿透

weixin_45368519的博客

03-24

5032

近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下

uniapp 遮罩层/弹窗阻止冒泡

颜浩的博客

05-06

2916

遮罩层 <view class="window"> <view class="mask" @touchmove.stop.prevent="stopPrevent"></view> <view class="popup" @click.stop="stopPrevent"> 遮罩层内容 </view> </view> js stopPrevent(){ }

uniapp微信小程序遮罩层u-overlay怎么设置滚动

08-19

我们正在处理的是在uniapp微信小程序中使用u-overlay遮罩层时，如何禁止底层页面滚动（滚动穿透）的问题。根据引用[1]和[2]，我们可以通过在遮罩层上添加`@touchmove.stop.prevent=""`来阻止触摸事件的冒泡和默认...

uniapp微信小程序下载视频或者文件增加下载进度

a1349798978 程序员博客

04-13

1082

通过以上实现，我们在微信小程序中完成了具备以下特性的视频下载功能：完善的权限管理流程实时更新的下载进度提示友好的异常处理机制跨平台兼容性（H5 / 小程序）关键技术点在于利用wx.downloadFile的进度监听事件，结合uni.showLoading实现动态进度提示。这种方案既保证了用户体验，又简化了开发成本，适用于大多数需要文件下载进度反馈的场景。在实际项目中，可根据具体 UI 需求扩展自定义进度弹窗样式，进一步提升交互体验。

uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题

李十三的博客

07-25

2149

首先,这个情况是什么时候会出现?遮罩层出现的时候会出现,那么,我们就可以监听控制遮罩层或者包含遮罩层的那个组件的flag变量. 当遮罩层显示的时候,让当前页面的overflow变成hideen,在遮罩层隐藏的时候,设置当前页面的overflow为’'. 设置了overflow为hidden,页面滚动条都没了,我看你怎么滚动.

uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）

记笔记

08-16

3199

uniapp打开popup遮罩层禁止底部页面滚动（滚动穿透）在微信小程序、App 平台，页面内需要特殊处理一下滚动穿透，在页面顶部添加一个page-meta组件动态修改页面样式。

uni-app自定义遮罩层样式

m0_69815481的博客

07-17

1294

在使用UView中的遮罩层组件是，遇到无法设置遮罩层位置样式，可以尝试用这个简单的方法设置遮罩层。

uniapp u-popup禁止穿透

m0_56055972的博客

07-25

733

<page-meta :page-style="'overflow:'+(selectDialog?'hidden':'visible')"></page-meta><u-popup :show="selectDialog"></-popup>

微信小程序中解决滚动穿透

MonkeyBananas的博客

02-19

368

我是使用了popup弹出层组件，弹出层里面有下拉框，在我滚动下拉框里数据时，也会触发到页面里的滚动。

uni-app遮罩遮住小程序tabbar

偏执的小男孩儿

10-31

1726

uni-app遮罩遮住小程序tabbar

uni-app项目实战笔记14--给全屏页面添加遮罩层

shenxiaomo1688的博客

06-14

640

1.引入uniapp时间格式化组件，对时间和日期进行格式化显示：‘2.定maskChange点击事件控制遮罩层的显示与隐藏。使用.mask > view{}来声明通用样式。：所有mask的直接子 view 元素（单独覆盖了部分样式（如颜色、定位）。2.下层胶囊层显示信息，评分和下载。1.上层显示计数，时间和日期；）共用绝对定位和居中逻辑，

uniapp遮罩层实现以及禁止页面滚动

duanwencai的博客

06-26

1399

弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动，给当前遮罩层添加catchtouchmove="true"便可。不过在电脑上调试是无效，因为这是触摸事件，需要在手机端测试，预览生成开发版，用手机微信扫描即可看到效果。