淺談Vue與swiper輪播圖框架結合小案例

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。

Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

那么Vue與swiper的結合，就顯的至關重要了，下面簡單介紹一下Vue與swiper結合使用的小案例

首先，在引入了各個js與css文件以后，寫入頁面結構

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>

 

在script標簽中對swiper進行實例

        var mySwiper = new Swiper ('.swiper-container', {
            loop: true, // 循環模式選項
        }) 

這時，一個簡單的swiper輪播圖小案例就實現了。

此時，我們可以通過定義一個Vue實例，來實現swiper內部輪播頁的遍歷。

        new Vue({
            el:"#app",
            data:{
                dataList:[1,2,3]
            },
            mounted(){
                new Swiper('.swiper-container',{
                    loop:true
                })
            }
        })

將頁面結構的類名為swiper-slide的標簽通過v-for指令，來進行遍歷

<div class="swiper-slide" v-for="data in dataList" :key='index'>{{data}}</div>

因為在以上正常實例化的過程當中，沒有進行一個ajax的異步請求操作，所以我們才可以直接在生命周期的mounted鈎子函數當中直接進行實例化，因為此時已經出現了真實dom樹。

但是我們在正常的項目交互當中，肯定是需要請求后端發送過來的數據，這就需要在created鈎子函數中進行異步數據請求，此時，如果我們再在mounted中進行swiper的實例化，那么問題就來了。

在這個地方，我們用setTimeout延時器的方式，來模擬異步請求數據，比如以下代碼：

        new Vue({
            el:"#app",
            data:{
                dataList:[]
            },
            created(){
                setTimeout(()=>{
                    this.dataList = [1,2,3]
                })
            },
            mounted(){
                new Swiper('.swiper-container',{
                    loop:true
                })
            }
        })

此時，我們會很明顯的發現，運行出來的swiper輪播圖，有很大的bug，它無法正常使用了，這是為什么呢？

這是因為我們通過延時器改變Vue自身數據的時候，會再進行一次虛擬dom樹比對，然后進行diff算法，渲染成真實dom樹這一個流程，此時，我們mounted鈎子函數中的實例早已經完成了， 所以造成了我們的swiper輪播圖無法正常使用了

那此時我們是不是該想，什么時候可以執行這個實例化呢，那么答案肯定是updated鈎子函數中

因為updated鈎子函數中，數據已經掛載完畢，數據也已經改變了，並且已經生成了新的真實dom樹，所以，在這個鈎子函數中，我們頁面中所有真實dom都已經存在了，在這里面進行我們的實例化，就不會出現上面我們所描述的問題了。

            updated(){
                new Swiper(".swiper-container",{
                    loop:true
                })
            }

這是初步解決異步請求數據，導致實例化位置需要改變的一個方法，還有其他的比較好用的方法，歡迎大家一起來討論學習