详解微信小程序swiper小圆点默认样式改变_swiper改变小圆点颜色

在微信小程序中，轮播图上的小圆点默认样式为黑灰色，这在视觉体验上不是很惊艳眼球，有时达不到我们的需求。那么，怎样进行默认样式的改变呢？

需要准备的东西：3张图片（swiper1,swiper2,swiper3）~

为了方便大家理解代码以及本地图片的引入，这里把我的文件结构也show~

一、方法1

采用官方提供的swiper属性(indicator-color与indicator-active-color)进行改变，不熟悉的请点击这里，所有属性都有->

https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html。

效果：

首先来看改变后的效果~

源码：

wxml代码

<swiper class="swipers" indicator-dots="{<!-- -->{indicatorDots}}" autoplay="{<!-- -->{autoplay}}" indicator-color="{<!-- -->{beforeColor}}" 
         indicator-active-color="{<!-- -->{afterColor}}">
    <block wx:for="{<!-- -->{imgs}}">
         <swiper-item>
             <image src="{<!-- -->{item.url}}"></image>
        </swiper-item>
    </block>
</swiper>

wxss代码

.swipers{
   height: 350rpx;
 }

js代码

Page({
  data: {
    imgs: [
      {url: '../../images/swiper1.jpg'},
      {url: '../../images/swiper2.jpg'},
      {url: '../../images/swiper3.jpg'}
    ],
 
    indicatorDots: true,//显示面板指示点
    autoplay: true,//自动播放
    beforeColor: "white",//指示点颜色
    afterColor: "coral"//当前选中的指示点颜色
  }
})

说明：

这种方法修改小圆圈的默认样式有很多的局限性，只能修改颜色，别的no~

二、方法2

此方法改进了方法1的局限性，不仅仅只是简单的修改显示的颜色，比如能改变形状，大小等等。思路如下：

禁用掉swiper的indicator-dots属性（即删掉),然后用view组件模拟dots。

其实，一开始我做成了与前面的效果一样（但代码不同），方便比较~->哈哈，其实，用类同这个词语还是比较恰当吧，毕竟小圆点比方法1中的大。

效果如下：

源码：

wxml代码

<view class="wrap">
    <swiper class="swipers" autoplay="{<!-- -->{autoplay}}" current="{<!-- -->{currentSwiper}}" bindchange="swiperChange">  
        <block wx:for="{<!-- -->{imgs}}">  
            <swiper-item>  
                 <image src="{<!-- -->{item.url}}"></image>  
            </swiper-item>  
        </block>  
    </swiper>  
   <!--重置小圆点的样式  -->
    <view class="dots">  
        <block wx:for="{<!-- -->{imgs}}">  
            <view class="dot{<!-- -->{index == currentSwiper ? ' active' : ''}}"></view>  
        </block>  
    </view>  
</view>

wxss代码

/*其实，正常情况下，没必要加.wrap,多余，但由于.dot要绝对定位到swiper上，而swiper中不能包裹其他的元素
（除了swiper-item)，所以只好加个.wrap用来约束.dot  */
.wrap{
  height: auto;
  position: relative;  
}

swipers{  
  height: 350rpx; 
}  

/*用来包裹所有的小圆点  */
.dots{  
  width: 156rpx;
  height: 36rpx; 
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 320rpx;
  bottom: 20rpx;
}  
/*未选中时的小圆点样式 */
.dot{  
  width: 26rpx;  
  height: 26rpx;   
  border-radius: 50%;
  margin-right: 26rpx;
  background-color: white;
}  
/*选中以后的小圆点样式  */
.active{  
  width: 26rpx;   
  height: 26rpx;
  background-color: coral;
}  

js代码

Page({
  data: {
    imgs: [
      {url: '../../images/swiper1.jpg'},
      {url: '../../images/swiper2.jpg'},
      {url: '../../images/swiper3.jpg'} 
    ],
    currentSwiper: 0,
    autoplay:true
  },
  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  }
})  

说明：这种方法我们可以通过改变.dot与.active的样式来改变小圆圈的展示姿态，以满足我们的需求，我把代码改成如下，则效果为：

达到上述效果只需在方法2的基础上,把wxss的.dots、.dot、.active的样式替换成下面的即可,

此外，还有一种我们经常需要的效果：如下~

->那就是数字展示~

要达到上述这个效果，只需在方法2的基础上做如下修改即可：

第一、把wxml中的

 <view class="dot{<!-- -->{index == currentSwiper ? ' active' : ''}}"></view> 

修改为

 <view class="dot{<!-- -->{index == currentSwiper ? ' active' : ''}}">{<!-- -->{index+1}}</view> 

第二、把wxss的.dots、.dot、.active的样式替换成下面的即可;

/*用来包裹所有的小圆点  */
.dots{  
  width: 180rpx;
  height: 36rpx; 
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 300rpx;
  bottom: 20rpx;
}  
/*未选中时的小圆点样式 */
.dot{  
  width: 32rpx;  
  height: 32rpx;   
  margin-right: 26rpx;
  background-color: yellow;
  border-radius: 50%;
  color: red;
  font-size: 26rpx;
  line-height: 32rpx;
  text-align: center;

}  
/*选中以后的小圆点样式  */
.active{  
  width: 32rpx;   
  height: 32rpx;
  background-color: coral;
  color: white;
}  

好了，至于实现方法肯定很多，毕竟每个人的思路不同，这儿只是一个启发~下面顺便讲点好玩的->swiper的vertical属性，这个可以实现轮播的垂直滚动。

实现过程~

首先，在swiper开始组件里加vertical="{{vertical}}"，然后在js中将其设为true,表明垂直滚动，

然后在wxss中做下相应的样式改变，改变后的样式如下~

  
/*用来包裹所有的小圆点  */  
.dots{    
  width: 180rpx;  
  height: 36rpx;   
  display: flex;  
  flex-direction: column;  
  position: absolute;  
  right:-80rpx;  
  bottom: 200rpx;  
}    
/*未选中时的小圆点样式 */  
.dot{    
  width: 32rpx;    
  height: 32rpx;     
  margin-bottom: 20rpx;  
  background-color: yellow;  
  border-radius: 50%;  
  color: red;  
  font-size: 26rpx;  
  line-height: 32rpx;  
  text-align: center;  
  
}    
/*选中以后的小圆点样式  */  
.active{    
  width: 32rpx;     
  height: 32rpx;  
  background-color: coral;  
  color: white;  
}    

最终效果：