vue中使用swiper並自定義分頁器樣式

一，安裝swiper

執行命令 npm install vue-awesome-swiper --save

二，引入swiper

import {Swiper} from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

 

三，使用swiper，不廢話，上代碼。

<template>
  <div class="page">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="imgCard" src="../assets/swiper1.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img class="imgCard" src="../assets/swiper2.jpg" alt>
        </div>
        <div class="swiper-slide">
          <img class="imgCard" src="../assets/swiper3.jpg" alt>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
export default {
  data() {
    return {
      dialogShow: false
    };
  },
  mounted() {
    this._initSwiper();
  },
  methods: {
    _initSwiper() {
      var mySwiper = new Swiper(".swiper-container", {
        direction: "horizontal",
        loop: true,
        autoplay: true, //自動輪播
        speed: 1000,
        pagination: {
          el: ".swiper-pagination",
          type: "custom",
          renderCustom: function(swiper, current, total) {
            var customPaginationHtml = "";
            for (var i = 0; i < total; i++) {
              //判斷哪一個分頁器此刻應該被激活
              if (i == current - 1) {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
              } else {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs"></span>';
              }
            }
            return '<span class="swiperPag">'+customPaginationHtml+'</span>';
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" >
.swiperPag {
  width:4.5rem;
  height: 0.07rem;
  border-radius: 0.04rem;
  display: flex;
  align-items: center;
  margin:0 auto;
  background-color: rgba($color: #000000, $alpha: 0.8)
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom:0.27rem;
}
.swiper-pagination-customs {
  width: 1.5rem;
  height: 0.14rem;
  display: inline-block;
}
/*自定義分頁器激活時的樣式表現*/
.swiper-pagination-customs-active {
  width: 1.5rem;
  height: 0.14rem;
  display: inline-block;
  border-radius: 0.07rem;
  background-color: #28a7e1;
}
</style>

注意：

• style標籤不要加scoped,不然樣式加不上！
• 直接npm install swiper --save 下載的是swiper4，build打包時，會報錯以下： Unexpected token: name (Dom7) [./~/swiper/~/dom7/dist/dom7.modular.js:16,0][static/js/vendor.cf492f2bb7f8b02ec428.js:16311,6]

 到後來才發現，這樣寫是有問題的，當路由切換後再次進入該頁面輪播就中止了，而後就作了以下更改。

export default {
  data() {
    return {
      dialogShow: false,
      mySwiper: {},
    };
  },
  activated() {
    this._initSwiper(); // 初始化swiper
  },
  deactivated() {
      this.mySwiper.destroy();// 銷燬swiper
  },
  methods: {
    _initSwiper() {
      this.mySwiper = new Swiper(".swiper-container", {
        direction: "horizontal",
        loop: true,
        autoplay: true, //自動輪播
        speed: 1000,
        pagination: {
          el: ".swiper-pagination",
          type: "custom",
          renderCustom: function(swiper, current, total) {
            var customPaginationHtml = "";
            for (var i = 0; i < total; i++) {
              //判斷哪一個分頁器此刻應該被激活
              if (i == current - 1) {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
              } else {
                customPaginationHtml +=
                  '<span class="swiper-pagination-customs"></span>';
              }
            }
            return '<span class="swiperPag">'+customPaginationHtml+'</span>';
          }
        }
      });
    }
  }
};