小程序swiper指示点自定义

官方文档可以更改指示点颜色
swiper组件

• 我们想要的是不仅仅只是简单的修改显示的颜色，比如能改变形状，代码如下：(mpvue写法)

wxml代码:

    <!-- 焦点图 -->
    <div class="swiper-wrap">
        <swiper class="swiper-inner" @change="swiperChange" :indicator-dots="indicator" :current="cur" :circular="circular" :autoplay="autoplay" :interval= "interval" :duration=
        "duration" >
            <block v-for="(item,index) in imgUrls" :index="index" :key="key">
                <swiper-item>
                    <image class="banner-img" :src="item.img" mode= "widthFix" @click="swipclick(index)"></image>
                </swiper-item>
            </block>
        </swiper>
        <!--重置小圆点的样式  -->
        <view class="dots">  
            <block v-for="(item,index) in imgUrls" :index= "index" :key="key">  
                <view class="dot" :class="{'active':  index == cur}"></view>  
            </block>  
        </view>
        <!--重置小圆点的样式 end -->
    </div>
    <!-- 焦点图 end-->

js代码：

export default {
    data () {
        return {
            imgUrls: [
            {
                img: 'https://img.benmu-health.com/wechatV2-mina/checkup/banner01.png',
                url: '/_pages/common/webview/main?url=https://wechat.benmu-health.com/mobile/app/common/material/render/17'
            },
            {
                img: 'https://img.benmu-health.com/wechatV2-mina/checkup/banner02.png',
                url: '/pages/checkup/filterPackage/index?category=PARENTS_CHECKUP'
            }
        ],
        indicator: false, //是否显示指示点
        interval: 5000,  //自动切换时间间隔
        duration: 400,  //滑动动画时长
        autoplay: true, //是否自动切换
        circular: true, //是否采用衔接滑动
        cur: 0         //当前所在滑块的index
        }
    },
     methods: {
         //轮播图的切换事件  
         swiperChange (e) {
            // console.log(e)
            this.cur = e.target.current  //获取当前轮播图片的下标, 可以给当前指示点加样式
        },
        swipclick (index) {
            this.$router.open({
                url: this.imgUrls[index].url
            })
        }
     }
}

wxss代码：

.swiper-wrap{
    width: 100%;
    height: 165rpx;
    background: #fff;
    position: relative;
    padding-top: 15rpx;
}
.swiper-inner{
    width: 690rpx;
    height: 150rpx;
    margin: 0 auto;
}
.banner-index{
    width: 690rpx;
    height: 150rpx;
}
.swiper-wrap image {
  height: 100%;
  width: 100%;
}
.dots{  
    @include rect(300rpx,18rpx);
    position: absolute;
    right: 0;
    bottom: 12rpx;
    left: 0;
    @include align();
}  
/*未选中时的小圆点样式 */
.dot{  
    margin-right: 8rpx;
    @include rect(10rpx,4rpx);
    border-radius: 100rpx;
    background-color: rgba(255,255,255,.4);
}  
/*选中以后的小圆点样式  */
.active{  
    @include rect(16rpx,4rpx);
    background-color: white;
}