修改微信小程序轮播图指示点

想要实现下面的样式

wxml  文件(swiper内容正常写):

<swiper class="swiper" style="height:260rpx"  indicator-dots="{{true}}" easing-function="{{linear}}" indicator-color="#fff" indicator-active-color="#1ec2a1" autoplay="{{true}}" interval="2000" circular="true">

      <swiper-item wx:for="{{goodsImg}}" wx:key="item" style="overflow:hidden;border-radius: 10rpx;height:260rpx;">

      <image src="{{item.imageUrl}}" class="banner"></image>

      </swiper-item>

    </swiper>

wxss 文件(距离、大小、颜色都可以设置):

.swiper .wx-swiper-dots.wx-swiper-dots-horizontal {

  margin-bottom: 6rpx;

  margin-left: 200rpx;

}

.swiper .wx-swiper-dot {

  width: 40rpx;

  display: inline-flex;

  height: 5rpx;

  margin-left: 10rpx;

  justify-content: space-between;

  border-radius: 3rpx;

}

.swiper .wx-swiper-dot::before {

  content: '';

  flex-grow: 1;

  background: #ccc8c8;

}

.swiper .wx-swiper-dot-active::before {

  background: #3874f6;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。