坑一：首先它自帶了swiper.css里面已經(jīng)包含了很多樣式，要修改的話很麻煩。
普通在引用頁(yè)面重寫(xiě)覆蓋還不可行。
第一個(gè)方法：css樣式寫(xiě)!important
第二個(gè)方法：我們有時(shí)候需要找到他的css文件進(jìn)行修改
main.js中他迷人的路徑

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

其實(shí)他是在node_modules\swiper\dist\css這里！

坑二：輪播到最后一張圖再回到第一張圖時(shí)，還經(jīng)過(guò)了第二張圖？

//這里加個(gè)loop屬性就可以了
loop:true,

唉，解決了坑二之后，就有坑三：頁(yè)面一刷新先出來(lái)這樣子？？？錯(cuò)位了？布局錯(cuò)亂問(wèn)題?。?！

圖片.png

發(fā)現(xiàn)是加載順序的問(wèn)題，因?yàn)閿?shù)據(jù)還沒(méi)有完全加載的時(shí)候就已經(jīng)渲染swiper了。
再加上這個(gè)屬性就好了。這個(gè)屬性盡量都加一下，自己能初始化swiper挺重要的

observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper

坑四：插件里面的分頁(yè)符，前后導(dǎo)航，不好意思，盡管這個(gè)功能很常用，我們已經(jīng)封裝好了函數(shù)，但我們只提供樣，請(qǐng)您自己掛事件！我們官網(wǎng)的例子也不會(huì)給您展示掛事件這一步的。

<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>  // 前一頁(yè)
        <div class="swiper-button-next" slot="button-next" @click="gonext"></div>  //后一頁(yè)
      </swiper>
    </div>

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

坑五：swiper這個(gè)插件挺多自己的屬性，可是我們也不太了解。所以請(qǐng)看官網(wǎng)

官網(wǎng)：https://3.swiper.com.cn/api/function/2014/1218/107.html
入門(mén)：http://www.itdecent.cn/p/7a81c7ef2f00
詳解：https://blog.csdn.net/dwb123456123456/article/details/82701740

貼一個(gè)別人躺過(guò)的坑
https://www.cnblogs.com/jf-67/p/9679987.html

我算是暫時(shí)脫坑了。。