微信小程序自定义轮播图指示点颜色简易版!

微信小程序自定义轮播图指示点颜色简易版!

作为一个刚上班的小白,拿小程序来练手,突然发现轮播图指示点要改了好看上往百度了好久,都是把指示点隐藏然后新设置样式和颜色.作为一个只想改颜色的人,那些都不符合我.

话不多说上图!

(为啥添加图片会有水印?)

都知道这个点默认是灰/黑色,但是有的时候在页面里面不好看呀!

看我接下来的代码把!(重要的在进度条里面,记得往右边拉)

<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,

结束啦 拜拜!