【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 [email protected] --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步：组件内的代码（最新版本分页器不显示，降低后可正常显示）

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

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

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

解决方案：