【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() {},