修改<swiper>默认圆点样式
需求：
当<swiper>组件中的图片展示时，对应的小圆点为实心，未展示的图片对应小圆点为空心
解决办法：
不显示<swiper>默认圆点，通过<view>标签模拟
效果图：
QQ20190513-001613-HD.gif
代码如下（可直接copy使用）：
// wxml
<swiper class='class-notes swiper-wrap' current="{{currentSwiper}}" bindchange="swiperChange">
<block wx:for="{{imgSource}}" class='class-notes'>
<swiper-item class='class-notes' >
<image src='{{item}}' class='class-notes' lazy-load='true'/>
</swiper-item>
</block>
</swiper>
<view class="dots"> // 这里是用来模拟小圆点的view
<block wx:for="{{imgSource}}" wx:key>
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
// js
Page({
data: {
imgSource: ['url0','url1','url2'],
currentSwiper: 0,
},
swiperChange (e){
this.setData({
currentSwiper: e.detail.current
})
}
// wxss
// 小圆点外层view
.dots{
position: relative;
display: flex;
flex-direction: row;
margin-bottom: 32rpx;
justify-content: center;
}
// 未选中的小圆点
.dot{
width: 10rpx;
height: 10rpx;
border-radius: 50%;
border: 2rpx #F8542E solid;
background-color: #FFFFFF;
margin: 0 10rpx;
}
// 选中的小圆点
.active{
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: #F8542E;
}
