微信小程序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,
});
}