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

一、html代碼：

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

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

 1 fetchData({
 2    API: "接口地址",
 3       callback: data => {
 4          this.arrDataList = data;
 5 　　　　　　// 在vue中，須要使用this.$nextTick,它會在數據變化之後，DOM更新之後進行回調函數，否則的話初始化輪播會無效。
 6          this.$nextTick(function () {
 7               8                  new Swiper ('.swiper-container', {
 9                         // Optional parameters
10                     slidesPerView : 3,  // 設置slider容器可以同時顯示的3個slides。
11                     slidesPerGroup : 3, // 設置slides的數量3個爲一組。
12                     spaceBetween : 20,　// 設置slide間的間距
13                     observer:true,　　　// 異步狀況下數據渲染完成，再次初始化輪播圖
14                     observeParents:true, // 異步狀況下數據渲染完成，再次初始化輪 
15                 });
16 17          });
18 });

三、完美通關。