[小程序]实现轮播自定义圆点样式

在项目的开发过程中，小程序提供的一些标签样式往往与需求会有些出入，最近在做轮播的时候，就遇到小程序自带的小圆点样式与需求不同，所以自己自定义了一个

1. wxml文件中

使用小程序提供的 swiper 标签，官方文档对 swiper 标签的介绍https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<view class="swiper-wrapper">
  <swiper class="swiper" bindchange="swiperChange" current="{{currentSwiper}}" autoplay="true">
      <view wx:for="{{items}}" wx:key="id" class="swiper-item-wrapper">
          <swiper-item class="swiper-item">
             <image mode="aspectFit" src="{{item.imgUrl}}"></image>
          </swiper-item>
      </view>
  </swiper>
  <view class="dots">
      <view wx:for="{{items}}" class="dot-wrapper" wx:key="id">
        <view class="dot {{index === currentSwiper ? ' active' : ''}}"> </view>
      </view>
  </view>
</view>

2. wxss文件中

.swiper-wrapper {
    width: 100%;
    margin-top: 50rpx;
    box-sizing: border-box;
    height: auto;
    position: relative;
}
.swiper {
    width: 100%;
    height: 424rpx;
    background: black;
}
.swiper-item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.carousel {
    width: 100%;
    position: relative;
}
.dots {
    position: absolute;
    right: 0;
    bottom: 30rpx;
    padding: 0 30rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.dot {
    width: 10rpx;
    height: 10rpx;
    background: white;
    border-radius: 50%;
}
.dot.active {
    width: 30rpx;
    height: 10rpx;
    border-radius: 35%;
    background-color: rgb(253,220,5);
}
.dot-wrapper:not(:last-child) {
    margin-right: 12rpx;
}

3. js文件中

Page({
    data: {
        currentSwiper: 0,
        items: [
            { id: 1, text: '1', imgUrl: '../../images/one.png'},
            { id: 2, text: '2', imgUrl: '../../images/two.png'},
            { id: 3, text: '3', imgUrl: '../../images/one.png'}
        ]
    },
    swiperChange(e) {
        this.setData({currentSwiper: e.detail.current})
    }
});

4. 效果图

swiper.png