當vue遇到swiper

空手接白刃發表於2017-10-25
Vue

我們這裡的解決方案主要是針對動態獲取資料的情況，如果您是靜態頁面就很好解決了，百度走起即可
你是不是有這樣的困惑：vue環境下使用swiper出現各種問題，舉個栗子：

  • swiper例項化後圖片資源壓根不載入
  • 載入了但是沒有輪播效果
  • 偶爾需要橫豎屏切換一下才可以動起來（移動端）...

首先我們看看swiper的例項化原理：
1.找到父級container包裹層
2.給這個父級的尾部逐個新增子元素
3.不要畫蛇添足，除了父級元素你可以龜腚（規定）大小以及位置，內部子元素不要亂加定位
4.得到元素後，進行補幀，形成迴圈輪播效果
5.至於動畫，其swiper.css做了大量的transform變形以及動畫

接下來我們說說vue的資料獲取：
現在vue已經更新了，較多的使用axios進行互動，當然你可以接續使用vue-resource(官方不再更新)，不管你的資料庫使用的是mysql還是mongodb，我們讀取資料時都有一定的時間，所以獲取資料都是非同步的，說的白一些就是你前臺的頁面渲染和我的資料獲取不是同步的，你做你的我幹我的，這就導致一個順序問題，到底是vue的資料獲取在先，還是我swiper例項化在先，我們想要的肯定是資料載入完畢，再開始例項化。

其實說到這裡，比較來氣，網上好多“程式設計師”拿vue的鉤子函式（生命週期）說這個問題，其實不管你用created還是mounted,都不是解決這個問題的關鍵所在，其關鍵點在於非同步載入和dom的更新。

具體解決方案：
不管你是在created階段還是mounted階段都可以實現最終效果，程式碼如下

    export default {
       data() {
          return {
            banner:[]
          }
        },
       methods: {
         _initBanner() {
             let swiperContainer = this.$refs.swiper;
             let swiperComp = new Swiper(swiperContainer, { //例項化一個cube輪播
                 autoplay: 2000,
                 autoplayDisableOnInteraction : false,
                 loop:true,
                 effect: 'cube',
                 cube: {
                     shadow: true,
                     slideShadows: true,
                     shadowOffset:18,
                     shadowScale:0.88
                 }
             })
         } 
       },
       created() {  //本例中你可以改為mounted
           this.$http.get('/api/getbanner').then((res)=>{
            this.banner = res.data;
           //console.log(this.banner);
              this.$nextTick(() => {   //修改資料之後立即使用這個方法，獲取更新後的 DOM
              this._initBanner()
            })
          })

       }
    }

記得在獲取資料後例項化swiper元件，並且新增nextTick方法，獲取dom的更新狀態。

相關文章