官方API地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
轮播图使我们开发小程序时经常使用的一种东西，小程序也给我们提供了轮播图的组件“<swiper>”。但是有时候“<swiper>”的自带样式并不能满足我们的需求。
比如，面板知识点的形状默认是圆的！
如果有特殊的需求就要求我们自己创造了！
先来看一下效果吧！

思路如下：
1，隐藏自带的面板指示点：

默认不显示

2，使用view模拟dots:

wxml:

    <!-- 模拟轮播图dot的小圆点 -->
<view class="dots">
      <block wx:for="{{imgUrls}}" wx:key>
        <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
      </block>
    </view>

JS:

Page({
  data: {
      currentSwiper:'',
      imgUrls: [
          'https://i04piccdn.sogoucdn.com/30e1da0a524cc4fb',
          'https://i04piccdn.sogoucdn.com/30e1da0a524cc4fb',
          'https://i04piccdn.sogoucdn.com/30e1da0a524cc4fb',
      ],
  },

    bindchange: function (e) {
        console.log("aa");
        this.setData({
            currentSwiper: e.detail.current
        })
    },
})

WXSS:

/*用来包裹所有的小圆点  */
 .dots {
  width: 180rpx;
  height: 20rpx;
  position: absolute;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20rpx;
}

/*未选中时的小圆点样式 */
.dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 14rpx;
  margin-right: 26rpx;
  background-color: #de8a78;
}
/*选中以后的小圆点样式  */
 
.active {
  width: 30rpx;
  height: 10rpx;
  background-color: #fc4308;}