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）