1、index.wxml中
<view class="materialBigImg">
<swiper indicator-dots circular interval="2000" duration="500" indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#fff" current="{{swiper.current}}">
<swiper-item wx:for="{{swiper.imgUrls}}" wx:key="index">
<image src="{{offlineImgUrl+item}}" mode="widthFix"></image>
</swiper-item>
</swiper>
<view class="prevBtn" bindtap="prevImg">
<image src="{{icon.prevBtn}}" mode="widthFix"></image>
</view>
<view class="nextBtn" bindtap="nextImg">
<image src="{{icon.nextBtn}}" mode="widthFix"></image>
</view>
</view>
2、js中代码
data:{
//素材图片数据
swiper: {
imgUrls: [
'materialImg.jpg',
'materialImg.jpg',
'materialImg.jpg',
],
current: 0,
},
}
/*
*@Description: 查看上一张
*@MethodAuthor: LiJuncai
*@Date: 2022-06-09 17:50:26
*/
prevImg: function () {
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current > 0 ? current - 1 : swiper.imgUrls.length - 1;
this.setData({
swiper: swiper,
})
},
/*
*@Description: 查看下一张
*@MethodAuthor: LiJuncai
*@Date: 2022-06-09 17:50:26
*/
nextImg: function () {
console.log(2);
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
this.setData({
swiper: swiper,
})
},