vue-awsome-swiper的各种坑

坑一：首先它自带了swiper.css里面已经包含了很多样式，要修改的话很麻烦。
普通在引用页面重写覆盖还不可行。
第一个方法：css样式写!important
第二个方法：我们有时候需要找到他的css文件进行修改
main.js中他迷人的路径

import 'swiper/dist/css/swiper.css'

其实他是在node_modules\swiper\dist\css这里！

坑二：轮播到最后一张图再回到第一张图时，还经过了第二张图？

//这里加个loop属性就可以了
loop:true,

唉，解决了坑二之后，就有坑三：页面一刷新先出来这样子？？？错位了？布局错乱问题！！！

图片.png

发现是加载顺序的问题，因为数据还没有完全加载的时候就已经渲染swiper了。
再加上这个属性就好了。这个属性尽量都加一下，自己能初始化swiper挺重要的

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

坑四：插件里面的分页符，前后导航，不好意思，尽管这个功能很常用，我们已经封装好了函数，但我们只提供样，请您自己挂事件！我们官网的例子也不会给您展示挂事件这一步的。

<div class="swi">
      <swiper :options="swiperOption" ref="myswi">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <div class="swiper-button-prev" slot="button-prev" @click="goprev"></div>  // 前一页
        <div class="swiper-button-next" slot="button-next" @click="gonext"></div>  //后一页
      </swiper>
    </div>

computed:{
    myswiper(){
      return this.$refs.myswi.swiper  //获得组件
    }
  },
  methods:{
    goprev(){
      console.log(this.myswiper)
      this.myswiper.slidePrev();
    },
    gonext(){
      this.myswiper.slideNext();
    }
  },

坑五：swiper这个插件挺多自己的属性，可是我们也不太了解。所以请看官网

官网：https://3.swiper.com.cn/api/function/2014/1218/107.html
入门：https://www.jianshu.com/p/7a81c7ef2f00
详解：https://blog.csdn.net/dwb123456123456/article/details/82701740

贴一个别人躺过的坑
https://www.cnblogs.com/jf-67/p/9679987.html

我算是暂时脱坑了。。