自定義vue-awesome-swiper的pagination分頁器樣式

環境：

vue^2.4.2

vue-awesome-swiper^2.6.7

swiper^3.4.2

成品圖：

功能：拖動或者切換下一個pagination點點寬度跟着過渡變換

代碼:

<template>
  <div class="m-topic-swiper">
    <swiper :options="swiperOption" :class="special">
      <swiper-slide v-for="(item, index) in content" :key="index">
        <router-link :to="url">
        <img class="m-topic-img" :src="item.imageUrl" alt="">
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" id="pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

js:

import { swiper, swiperSlide } from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css'

export default { name: 'm-topic-swiper', props: ['content', 'special'], components: { swiper, swiperSlide }, data() { return { swiperOption: { // 可寫swiper一些原生配置
     pagination: '.swiper-pagination', loop: true, watchSlidesProgress : true, autoplay: 3000, speed: 600, onProgress: (swiper, progress) => { //進度函數返回拖動進度 let n = this.content.length let test = document.getElementById('pagination') if (test) { progress = parseInt((((progress - 1 / (n + 1)) / n * (n + 1)) * 100).toFixed(0)) //swiper3.XX版本不是從0開始，修正一下progress if(progress < 0){ progress = 100 + progress } let nowNumber = Math.floor(progress * n / 100) === n ? n - 1 : Math.floor(progress * n / 100) //找出當前點點 let percent = (progress / 100 - (nowNumber / n)) * n //拖動佔總份額多少 let nextNumber = nowNumber + 1   //下一個要變化的點點
        if(nowNumber === n - 1){ nextNumber = 0 } let now = test.children[nowNumber] let next = test.children[nextNumber] let maxWidth = 0.3         // 點點最大寬度
        let minWidth = 0.08        //點點最小寬度
        let dif = maxWidth - minWidth next.style.width = dif * percent + minWidth + 'rem' now.style.width = dif * (1 - percent) + minWidth + 'rem'
        for(let i = 0; i < test.children.length; i++) { if(i !== nowNumber && i !== nextNumber){ test.children[i].style.width = minWidth + "rem"  
 //防止拖動的太快數據丟失遍歷動態給其餘點點最小寬 } } } } }, } },
}

css:

<style lang="postcss"> .m-topic-swiper { .swiper-container { width: 100%; .m-topic-img { display: block; width: 100%;
        } .swiper-pagination { height: .23rem; font-family: PingFangSC-Regular; font-size: .156rem; color: #fff; letter-spacing: 0; line-height: .12rem; bottom: 0;
      } .swiper-pagination-bullet { background: #fff; opacity: 0.8; height: 0.08rem; border-radius: 0.06rem; width: 0.08rem; transition: all 0.2s; //可設置緩慢變化
      } .swiper-pagination-bullet-active { width: 30px;
          } } } </style>

收工~~~