uniapp禁止遮罩层下页面滚动的解决方法

在开发过程中，经常需要创建自定义弹窗。然而，当弹窗打开时，往往会发现弹窗背后的页面仍然可以滚动，影响用户体验。下面介绍几种解决该问题的方法。

可用方法（不推荐）：最外层 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中禁止遮罩层下页面滚动的几种方法。如需了解更多相关内容，请搜索本站历史文章或继续阅读后续文章。感谢支持！