以前都覺得swiper的使用很簡單铺呵，那是因為使用swiper時都是寫的數據，按照官網上介紹直接初始化swiper隧熙，隨便丟一個地方初始化就ok了片挂，但是在很多需求中，我們都需要動態(tài)的改變數據贞盯，這樣可能就會遇到很多問題
以下簡單說說最近遇到的問題：
1音念、swiper不能自動切換（設置了autoplay）。
2躏敢、數據不匹配（需要加載的數據以改變闷愤，但是swiper里面的數據出現錯誤）。
3父丰、數據匹配過后肝谭，永遠切換不到第一條數據掘宪。
4、根本不能切換攘烛，手動拉也拉不動魏滚。
關于在vue項目中如何引用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>
<!--如果需要分頁器-->
<div class="swiper-pagination"></div>
</div>
methods : {
initSwiper(){
setTimeout( () => {
//輪播
var mySwiper = new Swiper('.swiper-container', {
autoplay:3000,//自動輪播
peed:300,
loop: true, //開啟輪播圖前后循環(huán)模式
slidesPerView:2, //輪播個數
direction:'vertical', //方向 vertical、horizontal
pagination:'.swiper-pagination',//如果需要分頁器
observer:true,//修改swiper自己或子元素時坟漱，自動初始化swiper
observeParents:false,//修改swiper的父元素時鼠次，自動初始化swiper
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
}
})
})
},
mounted () {
this.$nextTick(() => {
this.initSwiper()
})
}
}
真正的核心部分在
observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:false,//修改swiper的父元素時芋齿，自動初始化swiper
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
}
加上這串代碼后腥寇，使用基本正常
mySwiper.reLoop(); 重新對需要循環(huán)的slide個數進行計算，當你改變了slidesPerView參數時需要用到觅捆，需要自動輪播的時候必須要加上赦役；
swiper.update(); 更新Swiper，這個方法包含了updateContainerSize栅炒，updateSlidesSize掂摔，updateProgress，updatePagination赢赊，updateClasses方法乙漓。也就是數據改變是重新初始化一次swiper；
mySwiper.startAutoplay(); 重新開始自動切換释移；
