评论

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>


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

3 个评论

  • UP°
    UP°
    2025-07-16

    touchmove 不能动态控制很麻烦 比如我需要长按时才可以拖动切换 这个时候我监听touchend事件 将move改成false 然后swiper-item就卡在哪里了 拖了一半 继续不下去了

    2025-07-16
    赞同
    回复 2
    • dixvr
      dixvr
      2025-07-28
      解决了吗
      2025-07-28
      回复
    • UP°
      UP°
      2025-09-29回复dixvr
      没解决 换了个解决方案 固定三个位置 长按的时候剩下的两个才展示 否则就不展示另外两个 展示内容通过判断决定 切换的时候请求上下页 通过当前和切换后组合的数字判定 比如10就是右划补充请求上一个
      2025-09-29
      回复
  • Chinesebread
    Chinesebread
    2025-03-04

    管用,支持

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

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

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