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

实现遮罩效果

  • 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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容