关于vue-awesome-swiper pagination组

项目做整屏滚动效果，使用 "vue-awesome-swiper": "^4.1.1"。
发现pagination这分页器罢工，完全不显示，查阅好多资料，比较靠谱的解决办法就是回退插件版本到@3.1.1。
确实也试过了，回退后pagination确实好用了，不过swiper的方法就要重新写了，两个版本插件公共方法完全就是两个写法，碍于已经开发完了所有其他功能，再换一遍写法的成本着实太高，所以就想着剑走偏锋一下，放弃API上的写法，自己硬写吧。

先把代码贴一下

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper);

组件

<template>
  <div class="page1-content">
    <div class="rights-con">
      <swiper ref="mySwiper" :options="rigthsOptions" @slideChangeTransitionEnd="slideFn">
        <swiper-slide>
          <img class="rights-img" src="../../assets/img/2020Bill/8-1.png">
        </swiper-slide>
        <swiper-slide>
          <img class="rights-img" src="../../assets/img/2020Bill/8-2.png">
        </swiper-slide>
      <!--div class="swiper-pagination" slot="pagination"></div-->
      </swiper>
      <!-- 假装自己是 pagination -->
      <div class="chang-con">
        <span class="dot" :class="{ 'active': slideInde == 0}"></span>
        <span class="dot" :class="{ 'active': slideInde == 1}"></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "page3",
  data() {
    return {
      rigthsOptions: {
        direction: "horizontal",
        speed: 200,
      },
      slideInde: 0,
    };
  },
  methods:{
    slideFn(){
      this.slideInde = this.$refs.mySwiper.$swiper.activeIndex;
    },
  },
};
</script>

<style lang="less" scoped>
.page1-content {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size:  100% 100%;
  background-image: url(../../assets/img/2020Bill/8.png);
  .rights-con{
    position: absolute;
    width: 58%;
    height: 20%;
    top: 47%;
    left: 19%;
    img.rights-img{
      width: 100%;
      height: 100%;
    }
  }
}
.chang-con{
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 20px;
  left: 0;
  bottom: -20px;
  .dot{
    position: relative;
    width: 15px;
    height: 4px;
    z-index: 999;
    margin: 0 4px;
    background: #b05d44;
    border: 1px #863a2e solid;
  }
}
.active{
  background: #a28256 !important;
  border: 1px #4c3d28 solid !important;
}
</style>

原本的pagination已经注释掉了

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

主要代码是一个方法

<swiper ref="mySwiper" :options="rigthsOptions" @slideChangeTransitionEnd="slideFn">


methods:{
   slideFn(){
     this.slideInde = this.$refs.mySwiper.$swiper.activeIndex;
   },
},

根据swiper属性activeIndex（参考swiper API文档 https://www.swiper.com.cn/api/properties/127.html）来判断滑动到第几个slide，对应地去更改相应的分页器小点点的样式就好了。

所以这样基本上就解决了分页器不显示的bug，当然这个山寨的pagination是静态的，也可以根据slide的数量来动态创建分页器。我就不尝试了，毕竟我很赖。