In the process of developing the WeChat applet, the common component is the swiper component, through which the effect of the round-robin map can be achieved. However, the swiper component's indication point defaults to small black spots. Generally, we can modify the color according to the related attribute method of swiper in API document, as follows:

indicator-color='#dbdbdb' 
indicator-active-color='#00ae61'

However, this can only modify the color of the indicator point, which can not meet the needs of our development, such as when we need the indicator point to be square or oval, the official API can not meet our needs.This paper describes a method to implement swiper pointers for different requirements.
First, look at the effect of this article:

Ideas for implementation

1. Disable the swiper attribute indicator-dots (delete the attribute method directly).
2. Customize the view component to implement swiper's dots.

Layout file

Add swiper components to the.wxml layout file

<view class='swipercontent'>
  <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange">
    <block wx:for="{{imgUrls}}" wx:key="unique">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150"/>
      </swiper-item>
    </block>
  </swiper>

  <view class="dots">
    <block wx:for="{{imgUrls}}" wx:key="unique">
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
    </block>
  </view>
</view>

In the layout file, define the bindchange="swiperChange" method to listen for changes to item s in swiper, and then define the view component to implement the indicator point layout.

Layout Properties

Set the properties of the related components in the layout above:

.swipercontent {
  position: relative;
}

swiper{
  width: 100%;
  height:340rpx;
}

swiper image {
  display: block;
  width: 100%;
  height: 100%;
}

.dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}

.dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  transition: all .6s;
}
.dot.active{
  width: 24rpx;
  background: #f80;
}

JS file

We handle the bindchange="swiperChange" binding event above through a js file:

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    autoplay: true,
    interval: 5000,
    duration: 1000,
    swiperCurrent: 0,
  },

  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  }

})

The effect in this effect picture can be achieved. If you have any questions, please leave a message.