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

環境:css

vue^2.4.2

vue-awesome-swiper^2.6.7vue

swiper^3.4.2ide

成品圖:函數

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

代碼:post

<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:this

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:url

<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>

收工~~~spa

相關文章
相關標籤/搜索