微信小程序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:

    
      
        
        {{theFirst.items[idx - sumIdx].title}}
        
          ￥{{theFirst.items[idx - sumIdx].shop_price}}
          ￥{{theFirst.items[idx - sumIdx].market_price}}