微信小程序重写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;
}

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值