swiper的使用之一：自定義分頁器pagiantion

今天項目用到swiper的自定義分頁器，因爲官網寫的比較簡單，而在網上看到也多數是之前版本的實例。通過多篇博客的參考，最後終於寫出來了。

使用版本

我使用的是3版本以上，而發現之前的版本和新版API上面有些差異，因此這兒就主要以3+版本爲參考。

使用的API

作自定義分頁器的時候，咱們須要使用pagination的type和renderCustom這兩個參數。

panigation: {
    type: 'custom',
    renderCustom: function(swiper, current,total){}

}

 

技術分析

在作自定義分頁器的時候，swiper會自動幫咱們在定義分頁器時的元素「.swiper-pagination」加上".swiper-pagination-custom"，若是前面已經在.swiper-pagination上面加了樣式，就不須要在寫樣式了，沒有就須要給"swiper-pagination-custom"定義樣式（我作的時候沒有加樣式）

再定義兩個類".swiper-pagination-customs"和".swiper-pagination-customs-active"，用來自定義須要的分頁器樣式（.swiper-pagination-customs自定義，可是另外一個必須是active用來定義選中時的樣式）

在renderCustom中循環輪播的頁面，將新的分頁器添加進去

let appSwiper = new Swiper('.swiper-comtainer',function(){
   pagination:{
      el: '.swiper-pagination',
      // 自定義分頁器，必須的type類型
      type: 'custom',
      renderCustom: function(swiper,current, total){
        var paginationHtml = "";
        for(var i= 0; i< total; i++) {
         // 判斷是否是激活焦點，是的話添加active類，不是就只添加基本樣式類
           if(i === (current -1)){
              paginationHtml = '<span class="swiper-pagination-customs swiper-pagination-customs-activ"></span>';
            }
              paginationHtml = '<span class="swiper-pagination-customs"></span>';
         }
        return paginationHtml;
     }
  } 

})

 到這兒就完成了自定義分頁器樣式的整個過程了，快去試試吧。