自定义swiper轮播图面板指示点的样式 微信小程序 作者:admin 阅读:2034次 微信小程序中的swiper组件是滑块视图容器,但是有很多样式是固定的,而实际使用的时候可能会根据轮播图大小、样式,可能就需要改变指示点的样式。(常见:修改指示点颜色、把知识点修改为小长方形等)。 这里没有什么特别逻辑,就直接贴代码吧。 **wxml** ```html ``` **css** ```css .ad-swiper .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom: -20rpx;} .ad-swiper .wx-swiper-dot{ width: 12rpx; height: 12rpx; display: inline-flex; justify-content:space-between; margin-left: -8rpx;} .ad-swiper .wx-swiper-dot::before{ content: ''; flex-grow: 1; background: rgba(255,255,255,1); border-radius: 22rpx;} .ad-swiper .wx-swiper-dot-active{ width: 22rpx;} .ad-swiper .wx-swiper-dot-active::before{ background: rgba(250,53,118,1);} ``` **效果展示**  **其它:**比如说当swiper只有一页的时候,我们也是可以把指示点隐藏了的,因为只有一屏的时候,其实指示点的意义不是很大,这里是需要在 indicator-dots 加个判断就行。 ```html ``` 赞一个 (18) 本站部分文章、数据、素材收集于互联网,一切版权均归源网站或原作者所有! 如果侵犯了您的权益请来信告知我们删除,邮箱:357234902@qq.com 标签:微信小程序 上一篇:控制wx:for循环渲染数据 下一篇:小程序清理本地缓存wx.clearStorage(),wx.removeStorage()