如何彻底解决小程序滚动穿透问题

我们在开发过程中总会有开发弹窗的需求，在弹窗弹起来的时候，底部的内容却可以滚动，最开始我们使用catchtouchmove解决了，但是在特殊布局的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。

就不卖关子了，我摊牌了。

使用官方的page-meta组件，很多童鞋可能还不知道这个是干嘛的，这里贴下官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html

通过该组件我们可以直接操作Page组件 ，我们给它的wxss样式overflow动态设置hiddenorvisible 就可以控制整个页面是否可以进行滚动。

image.png

示例代码：

<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />
<button class="button" bindtap="handleClick">点我弹出弹窗</button>
<!-- 模拟页面滚动 -->
<view wx:for="{{300}}" wx:key="index">{{item}}</view>
<!-- 分享弹窗 -->
<view class="dialog-wrap {{visible ? 'active' : ''}}">
  <view class="dialog-back {{visible ? 'active' : ''}}"></view>
  <view class="share-box-container {{visible ? 'active' : ''}}">
    <view class="share-content">
      <view class="share-box">
        <button class="share-item" hover-class="none" open-type="share" bindtap="handleClose">
          <image src="https://qiniu-image.qtshe.com/20210409_wechat.png" mode="widthFix" />
        </button>
        <view class="share-item" bindtap="handleShareTimeLine">
          <image src="https://qiniu-image.qtshe.com/20210409_moment.png" mode="widthFix" />
        </view>
      </view>
    </view>
    <image src="https://qiniu-image.qtshe.com/20210409close-btn.png" class="close-btn" bindtap="handleClick" />
  </view>
</view>

控制弹窗显隐藏：

const app = getApp()

Page({
  data: {
    visible: false
  },
  onLoad() {
   
  },
  handleClick() {
    this.setData({
      visible: !this.data.visible
    })
  }
})

wxss弹窗样式太多，这里就不贴，放代码片段里了。

兼容底部是scroll-view，以及弹窗内的scroll-view都不会穿透影响底部的内容。

image.png

老规矩，结尾放代码片段：

https://developers.weixin.qq.com/s/U6ItgQmP7upQ