解决vue-awesome-swiper 4.x + swiper 5.x 分页pagination配置不生效问题
这次给的需求需要实现几个轮播图，我打算用swiper来做。刚开始我参照同事之前实现的swiper，复制到我的新页面中，是可用的。但是这次的需求需要有底下的分页pagination，而且因为版本比较老，比较难找到配置项。这里说一下具体的解决思路。
文章目录
- 首先是去 package.json 看到底用了哪一种swiper
- 接着去npm官网找到对应的版本
- bulletClass不生效
- 资料汇总
首先是去 package.json 看到底用了哪一种swiper
经过查找是vue-awesome-swiper，同时也可以看到具体的版本。
- package.json
{"swiper": "^5.4.5","vue-awesome-swiper": "^4.1.1"
}
接着去npm官网找到对应的版本
https://www.npmjs.com/package/vue-awesome-swiper/v/4.1.1
官网这里刚好看到 安装命令会同时下载两个包 vue-awesome-swiper 和 swiper 。
往下找源码发现有pagination的示例。这里的源码需要看全，配置项el里面明显是指定了一个class容器的。如果template部分没有 <div class="swiper-pagination"></div> 这句话的话，分页也是不会显示的。
但其实这样是不够完成需求的，因为默认的分页颜色、间距都不对。
往下一直找到曾经的文档。
这个链接点开，https://www.swiper.com.cn/api/index.html，就是具体的配置项。
在这里找到pagination。
bulletClass不生效
https://www.swiper.com.cn/api/pagination/79.html
这里最开始有一个bulletClass（注意这个配置项里面没有点：.），于是我就按这里的配置了一下。不生效且分页也没有了。
当时并没有看到下面那个bulletActiveClass的配置项。
所以我去网上搜索了一下 bulletClass不生效 。
看到了GitHub有人提交了 issue 但没有人回复他：https://github.com/surmon-china/vue-awesome-swiper/issues/231。
后面在csdn里面发现了解决方法：https://blog.csdn.net/A88552211/article/details/114938500
但是这么照着做之后还有错，因为公司的vue中是用scss写的。所以需要另写一对标签，把这两个类名写在text/css里
<style type="text/css">
.my-bullet-active{background: #ff6600;opacity: 1;
}
</style>
最后我回看官网，发现了bulletActiveClass：https://www.swiper.com.cn/api/pagination/80.html
但是官网写的确实很粗糙。
资料汇总
csdn解决方法 https://blog.csdn.net/A88552211/article/details/114938500