【vue-awesome-swiper】vue-awesome-swiper最新版不显示分页器pagination

一、版本说明：

vue-awesome-swiper v4.1.1

Swiper v6.3.3

分页器不显示的问题，并没有解决，我是降低了版本。因为我看最新版本是近半个月才升级，swiper的官网api尚不完善，再加上项目并非一定要使用最新版本，所以就降低了版本。

降低后：

vue-awesome-swiper v3.1.3

Swiper v4.5.1

二、问题介绍

我是参照github进行操作的，第1步：执行安装命令

npm install swiper vue-awesome-swiper --save

命令安装，安装的都是最新版。想要指定版本可以 @版本号

npm install vue-awesome-swiper@3.1.3 --save

第2步：在main.js 里引入对应文件

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x) swiper版本大于等于6.x时引用
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x) swiper版本小于等于5.x时引用
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

第3步：组件内的代码（最新版本分页器不显示，降低后可正常显示）

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    }
  }
</script>

三、改变分页器的背景颜色

scoped后，样式只对本组件的标签起作用，直接设置.swiper-pagination-bullet-active不起作用，要用 >>> ,样式穿透，意思是.box 下的 .swiper-pagination-bullet-active 样式修改

<style  scoped lang="stylus">
.box >>> .swiper-pagination-bullet-active{
  background #fff
}
</style>

四、优化方案（如果swiper容器的高度是由图片撑起来的，当加载缓慢时，swiper内容坍塌，加载完成后页面内容会有明显抖动）

解决方案：

<style  scoped lang="stylus">
.box
  height 0
  padding-bottom 73.2% //\\百分比为图片高/宽
  background-color #ccc  
  img
    width: 100%
</style>