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!