本文介绍uniapp中自定义弹窗时底层页面仍可滚动的问题。对比了设置高度限制、catchtouchmove阻止冒泡以及官方推荐的@touchmove.stop.prevent三种方案。重点解析推荐方案如何在真机环境下有效禁止滚动，同时避免控制台报错，适用于各类弹窗场景。
在开发过程中，经常需要创建自定义弹窗。然而，当弹窗打开时，往往会发现弹窗背后的页面仍然可以滚动，影响用户体验。下面介绍几种解决该问题的方法。
可用方法（不推荐）：最外层 view 设置 height 和 overflow
根据弹窗是否打开的状态，动态调整最外层 view 的 height 和 overflow 属性：
<!-- 页面 view -->
<view :style="{height:isOpenCheck?'100vh':'',overflow:isOpenCheck?'hidden':''}"></view>该方法通过限制页面高度来阻止底层滚动，但存在明显缺陷：页面会重置到顶部，且下方样式会被向上挤压。因此，这种方法并不推荐在实际项目中使用。
可用方法（不是很推荐）：catchtouchmove='moveHandle'
这种方法比较特殊，在官方文档中可能难以直接找到相关说明。具体原理可参考文章：catchtouchmove这个具体是做什么的?
其原理与官方推荐的方法类似，都是通过阻止事件冒泡来实现禁止滑动的效果：
<!-- 弹窗 view -->
<view v-if="isOpenCheck" class="date-bg" catchtouchmove="catchTouchMove"></view>// js 触发的函数
catchTouchMove: function() {
return false;
},虽然此方法可以生效，但触发函数时会产生大量警告信息，因此也不推荐采用。
可用方法（推荐）：@touchmove.stop.prevent="moveHandle"
这是官方推荐的标准做法，详见 uniapp 官网介绍。
若需禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"。moveHandle 用于处理 touchmove 事件，也可以直接设为空函数。将该代码直接添加到弹窗的最外层 view 即可。尽管在编译器中鼠标滚轮仍可能触发滚动，但在真机环境下，手指滑动将不再导致底层页面滚动。
<!-- 弹窗 view -->
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>// js 触发的函数:置空即可
moveHandle: function() {},总结
本文介绍了uniapp中禁止遮罩层下页面滚动的几种方法。如需了解更多相关内容，请搜索本站历史文章或继续阅读后续文章。感谢支持！