小程序swiper带切换按钮

小程序自带swiper组件，

display-multiple-items 同时显示的滑块数量
current： 当前所在滑块的 index
duration：切换需要花的时间 一般为1秒
bindchange：current发生改变触发
bindanimationfinish：动画结束时触发
circular 是否采用衔接滑动

      <view class="swiperCont">
        <view class="activeBtn1" bindtap="toLeft"></view>
        <view class="activeBtn2" bindtap="toRight"></view>

        <swiper current="{{currentIndex}}" circular="true" duration="1000" bindchange="changeIndex" bindanimationfinish="changeFinish" display-multiple-items="4">
          <swiper-item wx:for="{{[1, 2, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}}" wx:key="index" bindtap="openPop" data-type="choose" data-ind="index">
            <view class="swiper_cont">
              <image src="../../ossweb-img/icon_treasureBox.png" mode="scaleToFill" class="slide-image" />
            </view>
            <text>道具名xxxxx道具名xxxxx{{index}}</text>
          </swiper-item>
        </swiper>

      </view>

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

  onLoad(options) {
  },
  onShow() {
  },
  onHide() {
  },
  toLeft: function (e) {
    console.log(this.data.flag)
    if (!this.data.flag) { // 动画未完成不执行
      return
    } else {
      // 修改按钮切换不可用状态
      this.setData({
        flag: false
      })
      let index = this.data.index
      if (index > 0) {
        this.setData({
          currentIndex: index - 1
        })
      } else {
        this.setData({
          currentIndex: 0
        })
      }
    }
  },
  toRight: function (e) {
    console.log(this.data.flag)
    if (!this.data.flag) { // 动画未完成不执行
      return
    } else {
      // 修改按钮切换不可用状态
      this.setData({
        flag: false
      })
      let index = this.data.index
      if (index >= 16) {
        this.setData({
          currentIndex: 0
        })
      } else {
        this.setData({
          currentIndex: index + 1
        })
      }
    }
  },
  changeIndex: function (e) { // 切换过程绑定
    console.log("e.detail.current",e.detail.current);
    this.setData({
      index: e.detail.current,
      currentIndex: e.detail.current
    })
  },
  changeFinish: function (e) { // 动画完成
    // 修改按钮切换可用状态
    this.setData({
      flag: true
    })
  },

.swiperCont {
  width: 650rpx;
  height: 180rpx;
  margin: 10rpx auto 0;
  position: relative;
}

.activeBtn1 {
  width: 40rpx;
  height: 66rpx;
  box-sizing: border-box;
  background: url("/ossweb-img/btn_active.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 20%;
  left: -40rpx;
}

.activeBtn2 {
  width: 40rpx;
  height: 66rpx;
  box-sizing: border-box;
  background: url("/ossweb-img/btn_active.png") no-repeat;
  background-size: 100% 100%;
  transform: rotate(180deg);
  position: absolute;
  top: 20%;
  right: -40rpx;
}

.swiperCont swiper {
  height: 180rpx;
}

.swiperCont swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

swiper-item .swiper_cont {
  width: 134rpx;
  height: 134rpx;
  box-sizing: border-box;
  background: url("/ossweb-img/propsBG.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

swiper-item .swiper_cont .slide-image {
  width: 90rpx;
  height: 90rpx;
}

swiper-item text {
  width: 134rpx;
  font-size: 20rpx;
  color: #122334;
  text-align: center;
}