1、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>
2、在后台接口返回数据后初始化swiper构造函数。(注意 this.$nextTick的使用)
1 fetchData({ 2 API: "接口地址", 3 callback: data => { 4 this.arrDataList = data; 5 // 在vue中,需要使用this.$nextTick,它会在数据变化以后,DOM更新以后进行回调函数,不然的话初始化轮播会无效。 6 this.$nextTick(function () { 7 this.arrDataList.Floor.forEach((item,index)=>{ 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 });
3、完美通关。