微信小程序 swiper轮播图的按钮切换

一、前言

swiper组件自带autoplay切换，本文将会介绍如何用到左右按钮切换轮播图，以及如何解决快速点击按钮出现的bug。

核心属性

circular：负责切换衔接的效果（否则最后一张与第一张的切换体验很差）
current：控制当前显示的页index索引
autoplay：是否自动播放，此处我们选择false（或者默认不写）
duration：切换页所需要花的时间，一般为1000即1秒
bindchange：current发生改变触发的方法
bindanimationfinish：动画结束时触发的方法（解决快速点击产生的bug）

swiper组件文档

二、代码

index.html

<view class="test">
  <view class="header">
    <view style="width:40rpx;height:30rpx;position:absolute;top:30%;left:-60rpx;" bindtap="toLeft">《</view>
    <view style="width:40rpx;height:30rpx;position:absolute;top:30%;right:-60rpx;" bindtap="toRight">》</view>
    <swiper circular="true" current="{{currentIndex}}" duration="1000" bindchange="changeIndex" bindanimationfinish="changeFinish">
      <swiper-item>
          <image src="/images/slide_img_1.png" mode="scaleToFill" class="slide-image" />
      </swiper-item>
      <swiper-item>
          <image src="/images/slide_img_2.png" mode="scaleToFill" class="slide-image" />
      </swiper-item>
      <swiper-item>
          <image src="/images/slide_img_3.png" mode="scaleToFill" class="slide-image" />
      </swiper-item>
    </swiper>
  </view>
  <view class="section"></view>
  <view class="footer"></view>
</view>

index.js

// index.js

var app = getApp()

Page({
  data: {
    currentIndex: 0, // 页面swiper的current索引
    index: 0,
    flag: true
  },

  toLeft: function (e) {
    console.log(this.data.flag)
    if (!this.data.flag) { // 如果动画还未完成，不执行
      return
    } else {
      // 修改按钮切换不可用状态
      this.setData({
        flag: false
      })
      var index = this.data.index
      if (index > 0) {
        this.setData({
          currentIndex: index - 1
        })
      } else {
        this.setData({
          currentIndex: 2
        })
      }      
    }    
  },
  toRight: function (e) {
    console.log(this.data.flag)
    if (!this.data.flag) { // 如果动画还未完成，不执行
      return
    } else {
      // 修改按钮切换不可用状态
      this.setData({
        flag: false
      })
      var index = this.data.index
      if (index >= 2) {
        this.setData({
          currentIndex: 0
        })
      } else {
        this.setData({
          currentIndex: index + 1
        })
      }
    }
  },
  changeIndex: function(e) { // 切换过程绑定
    this.setData({
      index: e.detail.current
    })      
  },
  changeFinish: function (e) { // 动画完全完成
    // 修改按钮切换可用状态
    this.setData({
      flag: true 
    })
  }
})

index.wxss

page{
  width: 100vw;
  height: 100vh;
}
.test {
  width: 100%;
  height: 100%;
}
.header {
  width: 80%;  
  height: 40%;
  margin: 40rpx auto;
  position: relative;
}
swiper {
  height: 350rpx;
}
.slide-image {
  width: 100%;
  height: 350rpx;
}

轮播图简单页面

三、注意点

1、衔接效果在点击左滑时正常，但是右滑到最后一张图片后，会失去衔接效果，经过第二张再回到第一张，这是之前微信小程序的bug（社区中官方回复），应当是和基础库版本有关，在真机上体验正常即可。
2、用bindanimationfinish来控制动画切换完全结束后才可使得左右滑动生效，当用户点击左滑或者右滑后，按钮变成“不可用状态”，直到动画完全结束。如果没有这个控制，当快速点击左滑或者右滑，会有切换bug。
3、代码中的swiper-item数量是静态写死的，真实场景用for循环，判断item的数量，所以js中也需要修改判断首项末项处的索引index。另外代码以及页面美观度和精简度，此处也不予深究。

谢谢阅读，有帮助的点个❤！

最后编辑于：2020.01.01 23:03:10