以前都覺得swiper的使用很簡(jiǎn)單，那是因?yàn)槭褂胹wiper時(shí)都是寫的數(shù)據(jù)，按照官網(wǎng)上介紹直接初始化swiper，隨便丟一個(gè)地方初始化就ok了，但是在很多需求中，我們都需要?jiǎng)討B(tài)的改變數(shù)據(jù)，這樣可能就會(huì)遇到很多問題

以下簡(jiǎn)單說說最近遇到的問題：
1、swiper不能自動(dòng)切換（設(shè)置了autoplay）。

2、數(shù)據(jù)不匹配（需要加載的數(shù)據(jù)以改變，但是swiper里面的數(shù)據(jù)出現(xiàn)錯(cuò)誤）。

3、數(shù)據(jù)匹配過后，永遠(yuǎn)切換不到第一條數(shù)據(jù)。

4、根本不能切換，手動(dòng)拉也拉不動(dòng)。

關(guān)于在vue項(xiàng)目中如何引用swiper插件步驟：

第一步 安裝swiper： npm install swiper@3.4.1 --save-dev

第二步 在用到此插件的組件中 引用組件

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css';

解決后的代碼如下：

HTML代碼
     <div class="swiper-container" >
            <ul class="swiper-wrapper" >
              <li class="swiper-slide" v-for="(item,index) in swiperList" :key="index">{{item.title}}</li>
            </ul>
            <!--如果需要分頁(yè)器-->
            <div class="swiper-pagination"></div>
     </div>

methods : {
    initSwiper(){
      setTimeout( () => {
        //輪播
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:3000,//自動(dòng)輪播
          peed:300,
          loop: true,  //開啟輪播圖前后循環(huán)模式
          slidesPerView:2, //輪播個(gè)數(shù)
          direction:'vertical', //方向 vertical、horizontal
          pagination:'.swiper-pagination',//如果需要分頁(yè)器
          observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
          observeParents:false,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
          onSlideChangeEnd: function(swiper){
          　　　swiper.update();  
          　　　mySwiper.startAutoplay();
          　　   mySwiper.reLoop();  
          }
        })
      })
    },
mounted () {
      this.$nextTick(() => {
        this.initSwiper()
      })
  }
}

真正的核心部分在

observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
observeParents:false,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
onSlideChangeEnd: function(swiper){
　　 swiper.update();
　　 mySwiper.startAutoplay();
　　 mySwiper.reLoop();
}

加上這串代碼后，使用基本正常

mySwiper.reLoop(); 重新對(duì)需要循環(huán)的slide個(gè)數(shù)進(jìn)行計(jì)算，當(dāng)你改變了slidesPerView參數(shù)時(shí)需要用到，需要自動(dòng)輪播的時(shí)候必須要加上；

swiper.update(); 更新Swiper，這個(gè)方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是數(shù)據(jù)改變是重新初始化一次swiper；

mySwiper.startAutoplay(); 重新開始自動(dòng)切換；