小程序之修改轮播图的小点样式

小程序之修改轮播图的小点样式

1、单独写一个小点的元素。

　　

2、将轮播图组件自带的小点隐藏

indicatorDots: false

　　

3、修改样式

swiper{
  width: 100%;
}

.swiper-box{
  position: relative;
  width: 100%;
}
.dots{  
  position: absolute;  
  left: 0;  
  right: 0;  
  bottom: 20rpx;  
  display: flex;  
  justify-content: center;  
}  
.dots .dot{  
  margin: 0 8rpx;  
  width: 14rpx;  
  height: 14rpx;  
  background: #fff;  
  border-radius: 8rpx;  
  transition: all .6s;  
}  
.dots .dot.active{  
  width: 24rpx;  
  background: #f80;  
} 

swiper image {
  width: 100%;
  height: 100%;
}