轮播图指示点换成数字，微信小程序
参考url https://blog.csdn.net/qq_36070288/article/details/83538229
后台
data: {
activeIndex: 0,
swiperList: [{
id: 0,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
}, {
id: 2,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
}, {
id: 3,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
}],
},
方法
// 自定义的banner图的方法
changeImg(e) {
let that = this
that.activeIndex = e.detail.current
this.setData({
activeIndex: e.detail.current
}),
console.log(that.activeIndex);
},
showLength() {
return this.swiperList.length
},
// 自定义的banner图的方法
前台 wxml
<!-- 轮播图 -->
<view class="banner">
<swiper class="swiper" autoplay="true" circular="true" bindchange="changeImg" >
<block wx:for="{{swiperList}}" wx:key >
<swiper-item class="item">
<image mode="aspectFill" class="slide-image" src="{{item.url}}" />
</swiper-item>
</block>
</swiper>
<span class="item-num" v-if="showLength>1">{{activeIndex+1}}/{{swiperList.length}}</span>
</view>
<!-- 轮播图 -->
样式文件 wxss
/* pages/goodsdetails/index.wxss */
/* 商品详情页 */
.swiper {
height: 500rpx;
width: 100%;
}
.swiper .item {
width: 100%;
height: 100%;
}
.swiper .item image {
width: 100%;
height: 100%;
display: block;
}
.banner {
position: relative;
}
.banner .item-num {
z-index: 9;
position: absolute;
bottom: 20rpx;
right: 20rpx;
background: rgba(0, 0, 0, 0.5);
padding: 0 22rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 20rpx;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.75);
}
