vue-awesome-swiper記錄、分頁器為空無法顯示

前言

需求是實現上下滑動翻頁。項目使用的是vue,需要依賴 vue-awesome-swiper

版本號

{
   "swiper": "^6.4.15",
   "vue-awesome-swiper": "^4.1.1"
}

關於當前版本與文檔的差異：node_modules/swiper中，去掉了css | js 等文件夾，swiper.min.css, swiper.esm.js等直接放到swiper目錄下

問題

1、首次加載異步數據swiper無法正確獲取邊界值。

添加observer屬性，初始化swiper

  swiperOption: {
   // ...
    observer: true, //修改swiper自己或子元素時，自動初始化swiper
    observeParents: true, //修改swiper的父元素時，自動初始化swiper
  }

2、分頁器無法顯示

按照官網配置el: ".swiper-pagination"，clickable: true依然無法顯示。大多數網友說降低版本等操作。其實沒有必要，可以多查查 issue，一般都會有解決方案

在官方readme提到 Custom Build with Swiper的處理方式，可以解決常見的分頁器、自動播放出現的問題。

import Vue from 'vue'
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/swiper.esm' //注意這里路徑，可以從node_modules/swiper查看文件位置
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
 
// Swiper modules
SwiperClass.use([Pagination, Mousewheel, Autoplay])
 
// -------------------------------------------------
 
// Global use
Vue.use(getAwesomeSwiper(SwiperClass))
 
// -------------------------------------------------
 
// Or local component
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
export default {
  components: {
    Swiper,
    SwiperSlide 
  }
}

自定義分頁器

參考官網 (demo)[https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/07-pagination-custom.vue]

template

<div
  class="swiper-pagination swiper-pagination-bullets"
  slot="pagination"
></div>

js

swiperOption: {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet(index, className) {
      return `<span class="${className} swiper-pagination-bullet-custom"></span>`;
    }
  },
  // ...
}

css

/deep/ .swiper-pagination-bullet-custom {
  width: 10px;
  height: 20px;
  background: #f90;
  opacity: 0.5;

  &.swiper-pagination-bullet-active {
    background: #f00;
    opacity: 1;
  }
}

---

以上，因為使用的滑動效果並不復雜，暫時記錄到此~

End!