微信小程序重写swiper点的样式

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

s

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;
}

猜你喜欢

转载自blog.csdn.net/lck8989/article/details/84872086
今日推荐