1.html:
<view class="swiper-wrap {{tab == 0 ? 'index': ''}}" wx:if="{{tab == 0}}">
<swiper current="{{selectCurrent}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}" circular="true" style="width:100%;height:100%;" bindchange="swiperChange">
<block wx:for="{{banner}}" wx:key="index">
<swiper-item>
<view style="display:block;width:100%;height:100%;" hover-class="none">
<image src="{{item.picUrl==''?'./../../images/home_banner_default_pic@2x.png':item.picUrl}}" mode="scaleToFill" style="width:100%;height:100%;" bind:tap="goPage" data-data="{{item}}"></image>
</view>
</swiper-item>
</block>
</swiper>
<view class="swiperBox" wx:if="{{banner.length >1}}">
<view class="swiperBox1 {{current == index ?'select':''}}" wx:for="{{banner}}" wx:key="index"></view>
</view>
</view>
2.css:
.swiperBox {
height: 6rpx;
width: 100%;
position: absolute;
bottom: 28rpx;
display: flex;
justify-content: center;
}
.swiperBox1 {
height: 100%;
width: 64rpx;
display: inline-block;
background: #849AB4;
margin-left: 16rpx;
}
.swiperBox1.select {
width: 64rpx;
height: 100%;
background:#fff;
border-radius: 3rpx;
display: inline-block;
margin-left: 16rpx;
}
3.js:
swiperChange(event){
this.setData({
current:event.detail.current
})
}
注意：1. selectCurrent 默认为 0 ， 根据在自己的需求来决定要不要 （当前页面有多个模块，来回切换时需要回到轮播的第一张图片），在切换后获取数据时把selectCurrent 设置成默认的值
2. swiper 默认高度为150rpx (当内容不是图片时，是一些其他东西，高度不确定的时候，需要获取他的高度) 见另一文章（
https://www.cnblogs.com/cm521mzg/p/13036282.html）