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

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、完美通关。

 

上一篇:新闻|2021 FOSDEM为期两天的活动成功举办,一大波学习资源来袭!


下一篇:JQ轮播图