微信小程序自定义轮播图指示点颜色简易版!
作为一个刚上班的小白,拿小程序来练手,突然发现轮播图指示点要改了好看上往百度了好久,都是把指示点隐藏然后新设置样式和颜色.作为一个只想改颜色的人,那些都不符合我.
话不多说上图!
(为啥添加图片会有水印?)
都知道这个点默认是灰/黑色,但是有的时候在页面里面不好看呀!
看我接下来的代码把!(重要的在进度条里面,记得往右边拉)
<view>
//轮播图的设置 比如说点啊轮播时间啊什么的,看到了indicator-active-color='pink' indicator-color="#fff"这个吗?这个就是设置点的颜色,白色是底色,pink是图片到了的颜色
<swiper style="height:400px" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}} "
duration="{{duration}}"circular="{{circular}}" indicator-active-color='pink' indicator-color="#fff" >
//这个里面就是轮播的图片了
<swiper-item>
<image src="../../img/6.png" class="img3"></image>
</swiper-item>
<swiper-item>
<image src="../../img/7.png" class="img3"></image>
</swiper-item>
<swiper-item>
<image src="../../img/8.png" class="img3"></image>
</swiper-item>
<swiper-item>
<image src="../../img/10.png" class="img3"></image>
</swiper-item>
</swiper>
</view>
接下来就是js里面的设置了(这里为设置轮播图的样式,颜色设置在上面!)
isShow:true,
iShow:false,
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500,
circular:true,
结束啦 拜拜!