swiper组件默认的点样式有时候不太符合我们想要的效果,这样就需要修改swiper默认的点样式类:
用到的点样式类有,.wx-swiper-dots.wx-swiper-dots-horizontal .wx-swiper-dot::before .wx-swiper-dot.wx-swiper-dot .wx-swiper-dot.wx-swiper-dot-active
wxml文件:
<swiper autoplay='true' indicator-dots='true'>
<swiper-item wx:for='{{pictureList}}' class='swiper-item'>
<!-- <image src='{{item}}' style='width:750rpx;height:750rpx;' mode='widthFix'></image> -->
<image-loader originalImage='{{item}}' width='750rpx' height='750rpx' mode='widthFix'></image-loader>
</swiper-item>
</swiper>
wxss文件:
.wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 0rpx;
float: left;
text-align: center;
}
.wx-swiper-dot::before{
content: '';
flex-grow: 1;
background: #fff;
border-radius: 15rpx;
border: 0rpx;
}
.wx-swiper-dot.wx-swiper-dot{
width: 15rpx;
height: 15rpx;
border-radius: 15rpx;
background: #fff;
}
.wx-swiper-dot.wx-swiper-dot-active{
width: 40rpx;
height: 15rpx;
border-radius: 15rpx;
background: #fff;
}