解决小程序滚动穿透方法
问题
小程序自定义弹框中,当内弹框中内容滚动到底部时,再滑动会导致底部页面滚动(滑动穿透)。
上张图看看
解决方案
- 在弹框的外层加上 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>