微信小程序实现遮罩及阻止遮罩层下的页面滚动

实现遮罩效果

• Html

<view class="mask-view">
  ...
</view>

• CSS

.mask-view {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 999;
  top: 0;
  left: 0;
}

阻止遮罩层下的页面滚动

只需要在遮罩层上加上catchtouchmove="ture"
需要注意的是：因模拟器无touch事件，需在真机上测试

<view class="mask-view" catchtouchmove="ture">
  ...
</view>

 

原文地址：https://www.jianshu.com/p/6fb10c78bbd7