微信小程序swiper指示点样式

1、小程序swiper装指示点的盒子

.swiper-box .wx-swiper-dots. wx-swiper-dots-horizontal
举个栗子：
其中v115-class-goods-scroll 是我自己给的swiper 的类名

.v115-class-goods-scroll .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: -10rpx;
     margin-left: -30rpx;
}

2、指定小程序swiper指示点长什么样

.swiper-box .wx-swiper-dot
列如：

.v115-class-goods-scroll .wx-swiper-dot{
    width:28rpx;
    display: inline-flex;
    height: 8rpx;
    margin-left: 10rpx;
    justify-content:space-between;
}

这时候 指示点的样式就变成了这种扁平的了

3、小程序swiper 未选中的指示点的颜色

.swiper-box .wx-swiper-dot::before
列：

.v115-class-goods-scroll .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(223,223,223,.5);
    border-radius: 4rpx
}

4、小程序swiper 选中的指示点的颜色

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

.v115-class-goods-scroll .wx-swiper-dot-active::before{
    background:#DF2C3F;   
}

我的全部代码：

css:

.v115-class-goods-scroll .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: -10rpx;
     margin-left: -30rpx;
}
.v115-class-goods-scroll .wx-swiper-dot{
    width:28rpx;
    display: inline-flex;
    height: 8rpx;
    margin-left: 10rpx;
    justify-content:space-between;
}
.v115-class-goods-scroll .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(223,223,223,.5);
    border-radius: 4rpx
}
.v115-class-goods-scroll .wx-swiper-dot-active::before{
    background:#DF2C3F;   
}

wxml:

<swiper class='v115-class-goods-scroll' 
  indicator-active-color="#DF2C3F"
  indicator-color="rgba(223,223,223,.5)" indicator-dots="{{true}}">
    <swiper-item style="width: 700rpx;max-width: 700rpx;" class="ak-flexB v116-class-goods-swiperItem" wx:if="{{(idx + 1) % 3 == 0 }}"
    wx:for="{{theFirst.items}}" wx:for-index="idx"
    wx:key="index" wx:for-item="aGoods" >
      <view class='v115-class-goods-cell' 
      wx:for="{{3}}" wx:key="sumIdx" wx:for-index="sumIdx"
      bindtap='jumpTo' data-url='/pages/productDetail/productDetail?id={{theFirst.items[idx - sumIdx].id}}'>
        <image src='{{theFirst.items[idx - sumIdx].thumb}}' mode='aspectFill' class='v115-class-goods-cell-img'></image>
        <view class='v115-class-goods-cell-tit ak-ellipsis-2'>{{theFirst.items[idx - sumIdx].title}}</view>
        <view class='ak-flexS v115-class-goods-cell-pic-box'>
          <view class='red-color'>￥{{theFirst.items[idx - sumIdx].shop_price}}</view>
          <view class='gray-color'>￥{{theFirst.items[idx - sumIdx].market_price}}</view>
        </view>
      </view>
    </swiper-item>
</swiper>