【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 官网 文章来源：https://www.toymoban.com/news/detail-466768.html
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了，虽然在编译器上的滚轮依旧可以滚动，但真机环境下的手指滑动无法再触发。文章来源地址https://www.toymoban.com/news/detail-466768.html
<!-- 弹窗 view -->
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
// js 触发的函数:置空即可
moveHandle: function() {},
到了这里，关于【uniapp】禁止遮罩层下的页面滚动解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
