自定义vue-awesome-swiper的pagination分页器样式

原文 : https://www.cnblogs.com/xiaoxiao666/p/9188365.html

环境：

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>

收工~~~