1、自定义 swipe 组件;
a、指示器原点按钮样式(禁止原组件默认原点):
wxml:...
<swiper class='swiper-wrap' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" indicator-active-color="#2a2a2a" interval="{{interval}}" duration="{{duration}}" next-margin="0rpx" current="{{currentSwiper}}" bindchange="swiperChange"></swiper>
<view class="dots">
<block wx:for="{{cards}}" wx:key='{{index}}'>
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
...
wxss: ..
.dots{
width: 500rpx;
height: 14rpx;
display: flex;
flex-direction: row;
position: absolute;
left: 0rpx;
bottom: 0rpx;
}
.dot{
width: 14rpx;
height: 14rpx;
border-radius: 50%;
margin-right: 14rpx;
border: 2rpx solid rgb(213, 213, 213);
background-color: white;
box-sizing: border-box;
}
.active{
width: 14rpx;
height: 14rpx;
border: none;
box-sizing: border-box;
background-color: #2a2a2a;
}
...
js:.....
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
...