评论

swiper禁用手动滑动解决方案

swiper禁用手动滑动解决方案

官方swiper组件,没有提供禁用手动滑动功能。这里我们需要给swpier-item添加“catch:touchmove="return false" 做拦截处理。

设置拦截处理后在swiper-item内部的布局里只允许点击事件,而普通的列表(view)也会被禁用掉不能正常滑动。

这时候需要在swpier-item内部布局使用scroll-view组件可以实现(纵向/横向)滑动。

完美解决了禁用swpier组件手动拖拽的需求。

示例:

<swiper current="{{ swiperIndex }}" bindchange="onSwiperChange">

<block wx:for="{{ swiperList }}" wx:for-index="swiperIndex" wx:for-item="swiperItem" wx:key="swiperIndex">

<swiper-item catch:touchmove="return false">

<scroll-view scroll-y>

<view class="list">

<block wx:for="{{ list }}" wx:key="index">

<view class="item">{{ item }}</view>

</block>

</view>

</scroll-view>

</swiper-item>

</block>

</swiper>


最后一次编辑于  01-24  
点赞 2
收藏
评论

2 个评论

  • Chinesebread
    Chinesebread
    03-04

    管用,支持

    03-04
    赞同
    回复
  • 郑钱花
    郑钱花
    01-26

    找一层view盖在swiper上面多简单,点击的话只需要知道swiper的current到几了就知道点的谁了

    01-26
    赞同
    回复
登录 后发表内容