vue项目一个页面使用多个轮播图详解

1、html代码：

 <div v-for="(item,index) in arrDataList.Floor">   // 根据后台数据循环渲染多个轮播图组件
    <div class="swiper-container">
        <ul class="swiper-wrapper">
           <li class="swiper-slide" v-for="(goodsItem,index) in item.GoodsList">   // 单个轮播组件下循环渲染多个slide
                 slide
          </li>
     </ul>
 　　</div>
 </div>

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

 fetchData({
    API: "接口地址",
       callback: data => {
          this.arrDataList = data;
 　　　　　　// 在vue中，需要使用this.$nextTick,它会在数据变化以后，DOM更新以后进行回调函数，不然的话初始化轮播会无效。
          this.$nextTick(function () {
                                new Swiper ('.swiper-container', {
                         // Optional parameters
                     slidesPerView : 3,  // 设置slider容器能够同时显示的3个slides。
                     slidesPerGroup : 3, // 设置slides的数量3个为一组。
                     spaceBetween : 20,　// 设置slide间的间距
                     observer:true,　　　// 异步情况下数据渲染完成，再次初始化轮播图
                     observeParents:true, // 异步情况下数据渲染完成，再次初始化轮                
                 });
           });
 });

3、完美通关。