小程序swiper轮播图标点样式设置

小程序 轮播图标点样式设置（可设置大小  颜色  形状）

轮播图xml

<view class='swiper'>
            <swiper class="swiper-box" indicator-dots="{{true}}" autoplay="{{false}}" bindchange="bindchange" style="height:{{imgheight}}rpx;" indicator-color="{{indicatorCo}}" indicator-active-color="{{indicatoraAC}}">
              <block wx:for='{{imgUrls}}' wx:key="{{index}}">
                <swiper-item>
                  <image src="{{item}}" data-id='{{index}}' bindtap="SwiperImageClick"  class="slide-image" mode="widthFix" bindload="imageLoad" style="height:{{imgheight}}rpx;"  />
                </swiper-item>
              </block>
            </swiper>
          </view>

  

计算图片大小的js

  imageLoad: function (e) {//获取图片真实宽度  
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽高比  
      ratio = imgwidth / imgheight;
    console.log(imgwidth, imgheight)
    //计算的高度值  
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight;
    var imgheights = this.data.imgheights;
    //把每一张图片的对应的高度记录到数组里  
    // imgheights[e.target.dataset.id] = imgheight;
  
    this.setData({
      imgheight: imgheight
    })
  },

 

标点样式css

/* 一下四个样式是轮播图标点设置样式 */
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
        margin-bottom: 2rpx;
}
.swiper-box .wx-swiper-dot {
        width: 12rpx;
        display: inline-flex;
        height: 12rpx;
        /* margin-left: 20rpx; */
        justify-content: space-between;
}
.swiper-box .wx-swiper-dot::before {
        content: '';
        flex-grow: 1;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 8rpx;
}
.swiper-box .wx-swiper-dot-active::before {
        background: rgba(244, 0, 0, 0.8);
}