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

时间:2024-03-10 20:20:02

环境:

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>

收工~~~