indicator-dots设置为false,关掉原生指示点 自己写个想要的指示点样式 |
<view style="position: relative;">
<swiper indicator-dots="{{false}}" autoplay interval="4000" circular style="height: 292rpx;" bind:change="dotchange">
<swiper-item wx:for="{{swiperlist}}" wx:key="index">
<image src="{{item.image}}" style="width: 100%;height: 100%;"></image>
</swiper-item>
</swiper>
<view class="dotbox">
<view class="flexbetween dotback">
<text class="dotstyle {{currentseletedswiper==index? 'dotseleted':'dotunseleted'}}" wx:for="{{swiperlist}}" wx:key="index"></text>
</view>
</view>
</view>
通过bind:change事件的事件参数e,能够获得当前是哪个轮播
//js文件
data: {
currentseletedswiper:0,
swiperlist: [{
url: '',
image: '/static/banner.png'
},{
url: '',
image: '/static/banner.png'
}, {
url: '',
image: '/static/blank.png'
}, ],
}
dotchange(e) {
// console.log(e);
this.setData({
currentseletedswiper:e.detail.current
})
},
//css文件
.flexbetween {
display: flex;
align-items: center;
justify-content: space-between;
}
.dotbox {
position: absolute;
bottom: 20rpx;
left: 50%;
transform: translateX(-50%);
}
.dotstyle {
padding: 4rpx;
border-radius: 50%;
margin: 0 4rpx;
}
.dotback {
padding: 13rpx 14rpx 15rpx;
border-radius: 20rpx;
background-color: rgba(0, 0, 0, 0.57);
}
.dotseleted {
background-color: #4BD5B1;
border: 0;
}
.dotunseleted {
background-color: #fff;
border: 0;
}