小程序滚动穿透解决方案(弹框滚动带动底部滚动)

·  阅读 1042

解决小程序滚动穿透方法

问题

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

上张图看看

解决方案

  • 在弹框的外层加上 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>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改