在項目中有這樣一個需求：頂部上下輪播用戶獲獎信息

輪播里面的文字是后端返回給前端的，我直接用vue渲染，此時的需求是后端返回的數(shù)據(jù)在變更了之后應該在頁面上實時更新，但是實際情況并非如此。
所以用到了Vue原生api：Vue.nextTick()，在數(shù)據(jù)改變之后立馬在視圖里面渲染出來，但是這時還是有問題，因為"swiper-slide"這一項是vue批量生成的，這造成了swiper切換的問題。所以在js中我先停掉上一個swiper，在數(shù)據(jù)更新并且渲染在了dom中，再開啟一個swiper：

<div class="swiper-slide" v-for="item in loopInfo">
    <span>{{item}}</span>
</div>

在需要更新數(shù)據(jù)時這樣寫：

    this.lockUpSwiper();
    this.loopInfo = [];
    Vue.nextTick(function () {
        console.log('更新dom');
        // self.unlockUpSwiper();
        self.topLoop();     //DOM更新時直接開啟swiper不用解鎖上一個上了鎖的swiper，因為dom更新了，上一個swiper被干掉了
    })

其中lockUpSwiper();是我自己封裝的方法，里面就兩行代碼：

    this.topSwiper.lockSwipeToPrev();
    this.topSwiper.lockSwipeToNext();

topSwiper是swiper實例，lockSwipeToPrev()和lockSwipeToNext()是swiper的api，就是字面意思：鎖住swiper不讓swiper上翻或者下翻，那么問題來了，為什么要鎖住swiper而不用解鎖呢：self.unlockUpSwiper();。在鎖住swiper后由于改變了數(shù)據(jù)，實際上swiper已經(jīng)重新被定義了，這時候如果調(diào)用self.unlockUpSwiper();會導致swiper數(shù)據(jù)錯亂，簡單形容現(xiàn)象就是亂刷，具體為什么會亂刷需要看源碼中的邏輯，感興趣的大家可以看一下，這里就不深究原因啦只小小的展開一下，

錯誤圖片：

swiper-err.png

正常圖片：

swiper-ok.png

從上面兩張圖可以看出出錯時同一時間有6個(甚至更多)項目在切換class，這直接導致樣式錯亂。而正常時只有4個項目在切換class。swiper是通過添加和刪除樣式來改變每一項，具體的swiper-slide所在的元素上的改變是三個class：swiper-slide-prev swiper-slide-active swiper-slide-next，分別對應上一個顯示內(nèi)容，當前顯示內(nèi)容和下一次顯示的內(nèi)容，在swiper.css中，這三個class分別是：

.swiper-slide-prev{pointer-events:auto;visibility:visible}

.swiper-slide-active{pointer-events:auto}

或者

.swiper-container-cube .swiper-slide-active{pointer-events:auto;visibility:visible}

.swiper-slide-next{pointer-events:auto;visibility:visible}

可以看到active有visiblity的狀態(tài)變化，具體需要參照.swiper-slide的樣式來看，這里也不過分展開了。

寫了一堆有的沒的，把想表達的總結(jié)一下：swiper中的切換項在改變之前應該停止siper，然后項目就為之后不需要開啟(unlockto)swiper，而重新實例化一個swiper就可以了。swiper是一款可用度非常高的插件，希望大家將使用中遇到的問題和解決辦法總結(jié)出來分享出來。