公司產品最近一個版本要求是要做一個分類的選項卡，選項卡可以滑動，可以點選不同分類顯示不同的關卡

當時公司是用了swiper外掛來做的，可是swiper一般是用來做輪播圖，相比較之下還是差別比較大的，奈何我又是一個比較懶的程式猿，只能將swiper來完成需求了~~

第一步是要引入檔案，我隨便寫一個大概的樣子

<script src="swiper.min.js"></script>

第二步是需要套用模板，我們翻看官方的介紹

這裡是需要說明一下的就是我當時.swiper-container用的是header標籤，.swiper-wrapper用的是ul標籤，.swiper-slide用的是li標籤，標籤對這些並沒有影響，我就是隨便叨叨~~

<header class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" v-for="(val,index) in classArr" :key="index" v-cloak >{{val.name}}</li>
    </ul>
</header>

第三步是配置相關的屬性，直接上程式碼

<script>
    var swiper = new Swiper('.swiper-container',{
        slidesPerView: 'auto',
        freeMode: true,
        slidesOffsetAfter: 15,
        roundLengths:true
    })
</script>
 

寫到這裡，基本的東西就出來，但是出現了bug：就是渲染出來的東東，你會發現基本上是無法翻頁，無法進行滾動，原因是第三步配置屬性執行的時候，頁面只渲染出了一個li，所以整個滾動輪播圖只有一個slide。

查閱swiper官方文件之後，發現了有趣的東東：

所以我們需要在配置屬性裡面加入這個監控，當子元素髮生改變的時候，自動初始化swiper

<script>
    var swiper = new Swiper('.swiper-container',{
        slidesPerView: 'auto',
        freeMode: true,
        observer: true,
        slidesOffsetAfter: 15,
        roundLengths:true
    })
</script>
 

這樣子，一個漂亮的分類選項卡頁面就完成了~