微信小程序自定义弹窗后禁止屏幕滚动（滚动穿透）

在弹窗背景层加上 catchtouchmove 事件

如果弹窗背景层元素包含弹窗，只要加上 catchtouchmove 事件即可阻止向上冒泡。示例代码:

<view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove">
  <view class="modal">
    <view class="modal-item" catchtap="shareLink">分享</view>
    <view class="modal-item" catchtap="toggleModal">取消</view>
  </view>
</view>

<!-- js -->
Pages({
  preventTouchMove() {}
})

在弹窗与弹窗背景层都加上 catchtouchmove 事件

如果由于弹窗背景层是公用的，那么弹窗背景层元素不包含弹窗，此时需要在弹窗与弹窗背景层上都加上catchtouchmove 事件即可阻止向上冒泡。示例代码:

<!-- 弹窗 -->
<view class="modal" hidden="{{!showModal}}" catchtouchmove="preventTouchMove">
  <view class="modal-item" catchtap="shareLink">分享</view>
  <view class="modal-item" catchtap="toggleModal">取消</view>
</view>

<!-- 弹窗背景层 通过控制z-index与opacity显隐 -->
<view class="modal-view {{bg_index}}" catchtouchmove="preventTouchMove">
</view>

<!-- js -->
Pages({
  preventTouchMove() {}
})

上述两种方式在电脑上测试是没有用的，这是触摸事件。因此，需要在手机端测试，预览生成一个开发版，用手机微信扫描即可测试效果。

下面的方式电脑上可以观察到测试效果。

在弹窗外层根元素添加属性

在弹窗外层根元素动态添加一个 no-scroll 样式，定义 no-scroll 为 {height: 100%; overflow: hidden;}。

当需要阻止滑动的弹窗显示时添加 no-scroll，弹窗关闭去掉 no-scroll 即可。

此种方式的缺点是当弹窗显示增加 no-scrll 后弹窗下面的页面会回到顶部。