微信小程序 swiper禁止手动切换

最新推荐文章于 2024-01-31 09:39:33 发布

原创最新推荐文章于 2024-01-31 09:39:33 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在微信小程序中实现自动播放轮播图，并禁用用户的触摸滑动切换功能。通过设置swiper组件的属性catchtouchmove来阻止默认的触摸事件，并通过在swiper-item上设置catchtouchmove返回false来实现这一效果。

微信小程序 swiper禁止手动切换

给swiper设置catchtouchmove为true，设置swiper-item的catchtouchmove返回false

<swiper
  class="swiper"
  indicator-dots="{{false}}"
  circular
  autoplay="{{true}}"
  vertical="{{true}}"
  interval="{{3000}}" 
  duration="{{300}}"
  easing-function="easeInOutCubic"
  catchtouchmove="true"
>
  <block wx:for="{{list}}" wx:key="index">
    <swiper-item catchtouchmove="stopChange">
      <view class="swiper-item">{{item.name}}</view>
    </swiper-item>
  </block>
</swiper>

stopChange() {
  return false
}

更多微信小程序知识点，查看