解决小程序滚动穿透方法

问题

小程序自定义弹框中，当内弹框中内容滚动到底部时，再滑动会导致底部页面滚动（滑动穿透）。

上张图看看

解决方案

• 在弹框的外层加上 catchtouchmove="funcName"。加上 catchtouchmove 后会导致页面无法滑动，需要在内容部分使用 scroll-view。

<view class="mask" catchtouchmove="funcName">
	// 代码
</view>

• 弹框的内容部分使用 scroll-view 组件，属性 scroll-x="true" 即可，记得给 scroll-view 设置高度，不设置高度也可能导致页面无法滑动

  <view class="mask" catchtouchmove="funcName">
    <view class="box">
      <scroll-view scroll-y="true">
        <view class="item">1</view>
        // ... 更多数据
      </scroll-view>
    </view>
  </view>

完整测试代码

<view class="container">
  <view class="list">
    <view class="item">11</view>
    // ...更多数据
  </view>

  <view class="mask" catchtouchmove="funcName">
    <view class="box">
      <scroll-view scroll-y="true">
        <view class="item">1</view>
        // ... 更多数据
      </scroll-view>
    </view>
  </view>
</view>