詳解微信小程序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;  
}    

最終效果：