微信小程序自定义轮播面板样式
在进行pc网站或移动端网站开发时，轮播经常会遇到，我们经常使用的就是swiper插件来实现轮播效果，如果想自定义其样式的话，完全可以重写其css，达到自定义的效果。在小程序当中，有现成的swiper组件来供我们使用，具体的使用方法不在此赘述，完全可以去查看官方文档。在这需要说的一点就是如何自定义轮播的样式，尤其是底部指示面板的样式，官方样式默认是不选中的为灰色圆点，选中的为黑色圆点，处于居中的位置。但是，有时候我们的设计稿的面板指示点是需要个性化的，那么如何去修改swiper组件的面板指示点的样式呢。下面我们来说一下。 其实官方的swiper组件和我们正常写的组件其实是差不多的，只不过封装起来，无法看到其内部的实现原理罢了。对于底部的圆点还是有相应的class类名来指示的。例如，圆点的父圆度其class名为wx-swiper-dots，分为垂直方向和水平方向，分别为.wx-swiper-dots-horizontal和.wx-swiper-dots-vertical，圆点的class名为wx-swiper-dot，有了这些我们就可以对其进行自定样式了，其实就是重写其样式 下面代码我们用到官方示例中的部分代码
<swiper class="swiper_container" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> durationjs部分不再粘贴了，有兴趣可以直接去官网上看，我给swiper组件添加了一个class：swiper_container。
.swiper_container .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 2rpx;
float:right;
text-align:right;
right:0;
width:100%;
padding-right:15px;
}
.swiper_container .wx-swiper-dot{
width:8rpx;
height:8rpx;
display: inline-flex;
justify-content:space-between;
vertical-align: middle;
border-radius: 15rpx;
overflow:hidden;
border:0px
}
.swiper_container .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background:#fff;
border-radius: 15rpx;
border:0px
}
.swiper_container .wx-swiper-dot.wx-swiper-dot-active{
width:15rpx;
border: none;
height:15rpx;
border-radius: 15rpx;
}
.swiper_container .wx-swiper-dot.wx-swiper-dot-active::before{
background:#2782D7;
}实现效果如下图所示
微信小程序自定义轮播面板样式
得到了其类名，至于实现其他的样式，你可以自由发挥了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读