當vue遇到swiper

咱們這裏的解決方案主要是針對動態獲取數據的狀況，若是您是靜態頁面就很好解決了，百度走起便可
你是否是有這樣的困惑：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的更新狀態。