微信小程序swiper添加左右切换按钮

发布时间 2023-05-05 11:32:06作者: ZerlinM

项目中需要使用swiper,需要添加左右切换的按钮,代码如下:
wxml

<view>
  <block wx:if="{{list.length>1}}">
    <van-icon bindtap="nextSwiper" name="arrow" class="icon-right" color="#c09d75"/>
    <van-icon bindtap="prevSwiper" name="arrow-left" class="icon-left" color="#c09d75"/>
  </block>
  <swiper class="swiper" id="swiper" circular="{{true}}" current="{{swiperCurrent}}" interval="3000" duration="500">
    <swiper-item wx:for="{{list}}" wx:key="index">{{item}}</swiper-item>
  </swiper>
</view>

js

// 上一页
prevSwiper() {
  const index = this.data.swiperCurrent - 1 < 0 ? 2 : this.data.swiperCurrent - 1;
  this.setData({
    swiperCurrent: index,
  });
},
// 下一页
nextSwiper() {
  const index = this.data.swiperCurrent + 1 > 2 ? 0 : this.data.swiperCurrent + 1;
  this.setData({
    swiperCurrent: index,
  });
}