uni-app 的uni-popup弹窗设置了maskClick="false" 属性之后，点击蒙版遮罩还是会关闭弹窗

本文深入解析uniapp中u-popup弹窗滑动穿透问题的根源，提供三种高效解决方案：事件阻止法、CSS控制法和scroll-view方案。通过详细代码示例和真机测试数据，帮助开发者彻底解决弹窗背景滚动问题，提升移动端应用的用户体验和交互流畅度。特别针对@touchmove.stop.prevent等关键事件处理技巧进行了重点讲解。

 官方uni-app的弹框popup模板问题: 官方的弹框示例页面在 /pages/extUI/pop

uni-date-picker中的maskClick无效的解决方法

uni-popup is-mask-click设置无效。

在uni-app中，有个很好用的组件uni-popup 点击遮罩层，会自动关闭，但是有时候不想让他自动关闭，或者想要监听关闭事件 点击不可关闭 <uni-popup ref="popup1" type="bottom" :maskClick='false' > </uni-popup> 点击关闭，同时监听关闭 <uni-popup ref="p...

click.stop：用于阻止冒泡@click.stop 标签范围内，点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗@click.stop 标签内的 @click 等事件：如果事件内有关闭弹窗的代码可关闭弹窗。

/** * 监听遮罩是否可点击 * @param {Object} val */ maskClick(val) { this.mkclick = false } 找到uni-popup.vue 文件， 将data里面的mkclick修改成false和watch里面的mkclick修改成false ...

提示：最近入职新公司负责小程序的研发，小程序是用uni-app研发的。中间有这样一个场景：点击“案例详情” 弹框展示案例内容。但是这个时候用户滑动弹框内部的内容的时候，遮盖层页面也会跟着滑动。查看uni-app 官网提示说现在前端存在这样的问题，需要用户自己想办法解决。于是就有了这篇博客。@touchend="end" 手指离开屏幕时触发的事件@touchmove="move" 手指在屏幕上移动时触发的事件。

根据需求的要求，在生成预付订单之后页面中需要弹出一个弹层，弹层中展示的内容为支付方式（渠道），由用户选择一种支付方式进行支付。在待支付页面中当用户点击了蒙层或右上角关闭按钮时，调用。custom-payment文件。3.支持 3 个自定义事件，该弹层组件是以扩展组件。2.支持两个自定义属性，

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

参考说明：uni-app的官方文档在使用bindChange方法时会有延迟，可以加上immediate-change=‘true’立即执行左边的是每列的下标，右边的数字是每列里面的选中的下标。

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

vue实现遮罩层禁止点击禁止滚动 先看效果图 直接上代码 html 遮罩层 <div class="mask" @touchmove.prevent @click="mask=false"> //点击自身是关闭 <div class="maskImg"> <img src="../../static/fxhy.png" alt /> </div> </div> <di

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

uni-popup 弹出层引入 基于 uni-app 的 UI 组件库 <!-- 选择项目弹框 --> <uni-popup ref="popup" type="center" :maskClick="false"> <view class="popup-project"> <view class="title"><text>选择项目</text></view> <view class=

最简单的点击事件 定义变量：mask = true 绑定点击事件：@click="mask = !mask " v-if="mask " 这个加给要显示的 <div @click="mask=!mask">21312321321</div> <div v-if="mask">wahdouihadsjkahnbwahdouihadsjkahn...

【代码】uni-popup基本使用方法。