vue項目一個頁面使用多個輪播圖詳解

1、html代碼：

<div v-for="(item,index) in arrDataList.Floor"> // 根據后台數據循環渲染多個輪播圖組件 2    <div class="swiper-container">
       <ul class="swiper-wrapper">
          <li class="swiper-slide" v-for="(goodsItem,index) in item.GoodsList"> // 單個輪播組件下循環渲染多個slide 5                 slide
         </li>
    </ul>
　　</div>
</div>

2、在后台接口返回數據后初始化swiper構造函數。（注意 this.$nextTick的使用）

fetchData({
   API: "接口地址",
      callback: data => {
         this.arrDataList = data;
　　　　　　// 在vue中，需要使用this.$nextTick,它會在數據變化以后，DOM更新以后進行回調函數，不然的話初始化輪播會無效。
         this.$nextTick(function () {
              8                  new Swiper ('.swiper-container', {
                        // Optional parameters
                    slidesPerView : 3,  // 設置slider容器能夠同時顯示的3個slides。
                    slidesPerGroup : 3, // 設置slides的數量3個為一組。
                    spaceBetween : 20,　// 設置slide間的間距
                    observer:true,　　　// 異步情況下數據渲染完成，再次初始化輪播圖
                    observeParents:true, // 異步情況下數據渲染完成，再次初始化輪 
                });
17          });
});

3、完美通關。