小程序修改swiper默认圆点样式

修改<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;
}

---