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

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

<view>
  <block wx:if="{{list.length>1}}">
    <van-icon bindtap="nextSwiper" name="arrow" class="arrow-left" color="#c09d75"/>
    <van-icon bindtap="prevSwiper" name="arrow-left" class="arrow-right" 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>

wxss
这里只是做一个 左右的小三角形

.arrow-left {
  border: 14rpx solid transparent;
  border-right-color: #437ae8;
  margin-right: 20rpx;
}

.arrow-right {
  border: 14rpx solid transparent;
  border-left-color: #437ae8;
  margin-left: 20rpx;
}

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,
  });
}
posted @ 2023-05-05 11:28  ZerlinM  阅读(767)  评论(0编辑  收藏  举报