嵌套走马灯Carousel

Carousel 的应用很广泛，基础用法这里不多做阐述，感兴趣的可以去element-gui了解Carousel 组件。

今天主要是梳理嵌套走马灯的逻辑，背景如下：

需要对项目做一个展示，项目可能有一个或多个，同时一个项目可能不包含标段，也可能包含一个或多个标段。

要求： 切换展示项目，若是项目包含标段，停止项目的切换，进行标段的切换（2个标段占用一个走马灯），当当前项目的标段信息切换到最后一页之后，切换下一个项目，一直这样轮回切换。

具体效果如下所示：

外层灰色框的是项目走马灯，里面嵌套的是标段走马灯。

代码如下：

<template>
<!-- 嵌套走马灯示例 :initial-index="projectIndex"  bidAutoArr[key]--><el-carousel :interval="4000" type="card" width="1500px" height="230px" :autoplay="projectAuto" @change="projectPlayChange"><el-carousel-item v-for="(item, key) in carouselData" :key="key"><p>项目编号： {{item.projectCode}}</p><p>项目名称： {{item.projectName}}</p><div class="outer"><el-carousel :interval="4000" type="card" height="100px" :autoplay="item.bidAutoplay" @change="bidPlayChange" ref="bidCarousel"><el-carousel-item v-for="(bidSection, bidSectionKey) in item.bidSections" :key="bidSectionKey" class="content"><p v-for="(bidInfo,bidInfoKey) in bidSection" :key="bidInfoKey">{{bidInfo.bidSectionCode}} : {{bidInfo.bidSectionName}}</p></el-carousel-item></el-carousel></div></el-carousel-item></el-carousel>
</template><script>
import data from '../dataMaked/CarouslDemo.json'
export default {data(){return {carouselData: [],   // 嵌套走马灯里需展示的数据projectAuto: false, // 项目是否自动切换projectIndex: 0,    // 走马灯显示的当前项目的索引}},methods: {// 项目走马灯切换projectPlayChange(proIndex) {console.log('==================项目=============================');console.log(proIndex);this.projectAuto = false;// 把上一页的项目的标段走马灯手动切换到第一页（不然上一页项目的标段走马灯是最后一页的状态）console.log('pppppppppppppppppppppppppppppppppppppppppppppp');console.log(this.$refs.bidCarousel[this.projectIndex]);this.$refs.bidCarousel[this.projectIndex].setActiveItem(0);// 更换项目索引为的当前项目this.projectIndex = proIndex;// 判断当前项目下标段走马灯数量，若是大于1，切标段；反之切项目console.log(this.carouselData[this.projectIndex].bidSections.length);if(this.carouselData[this.projectIndex].bidSections.length > 1) {this.carouselData[this.projectIndex].bidAutoplay = true;} else {this.projectAuto = true;}},// 标段走马灯切换bidPlayChange(bidIndex) {console.log('==================标段=============================');console.log(bidIndex);// 获取当前项目的标段走马灯数量const BidCarouselNum = this.carouselData[this.projectIndex].bidSections.length;// console.log(BidCarouselNum);// 当前索引等于BidCarouselNum-1，意味着切到最后一张走马灯了//      此时：判断项目长度，如果项目长度大于1，停止切标段，切项目；反之一直切换标段if(bidIndex == BidCarouselNum-1 && this.carouselData.length > 1) {this.carouselData[this.projectIndex].bidAutoplay = false;this.projectAuto = true;}},},created() {},mounted() {// 数据格式重构--嵌套走马灯里需展示的数据this.carouselData = this.$carouselInitData(data.res.kbProjectBidInfo);console.log('111111111111111111111111111111111111111111111');console.log(this.carouselData);// 查看第一个项目的标段数量，如果标段数量大于1，从标段开始切换。//    若是标段数量小于1，判断项目的个数，项目个数大于1，切项目；项目个数小于1，不动。if(this.carouselData[0].bidSections.length > 1) {this.carouselData[0].bidAutoplay = true;} else {if(this.carouselData.length > 1) {this.projectAuto = true;}}}
}
</script><style>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 50px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}.content:nth-child(2n) {background-color: #1db418 !important;}.content:nth-child(2n+1) {background-color: #d3361b !important;}.outer {height: 100px;width: 800px;background: #3128b4;margin: 10px auto;}
</style>

主要用到的走马灯的属性：

属性	含义
:autoplay	是否自动切换走马灯
:interval	走马灯自动切换的时间间隔

除此之外，还用到走马灯切换时触发的事件：@change

还用到手动切换走马灯的方法：setActiveItem

逻辑梳理起来很简单，由于我们是嵌套走马灯，所以优先需要生成嵌套走马灯需要的数据格式，由此，我封装了一个方法。

/*** @Author: zhl* @Date: 2021-03-04* @Description: 生成两个嵌套跑马灯显示的项目及标段信息* @param {*} originData 表示项目信息数组* @param {*} bidNum 表示内层每个跑马灯显示的标段数量，不传参数就使用默认值：2*/
var carouselInitData = function(originData, bidNum=2) {var newData = [];for(let i=0; i < originData.length; i++) {var info = {}; // 包含项目和标段信息的对象info.projectCode = originData[i].projectCode; // 项目编号info.projectName = originData[i].projectName; // 项目名称info.bidSections = []; // 内嵌走马灯每页显示标段信息(将原来的一维数组转化为二维数组)if(originData[i].gtvBidSection && originData[i].gtvBidSection.length > 0) { // 先判断该项目有没有标段var bidSectionNum = Math.ceil(originData[i].gtvBidSection.length / bidNum);for(let j=0; j < bidSectionNum; j++) {var bidSection = originData[i].gtvBidSection.slice(j*bidNum, (j+1)*bidNum);info.bidSections.push(JSON.parse(JSON.stringify(bidSection)));}}info.bidAutoplay = false; // 默认设置内层跑马灯（包含标段信息的）不切换newData.push(JSON.parse(JSON.stringify(info)));}return newData;
}
export default carouselInitData;

对应的生成数据之后，就可以进行切换了：

首先 ，将项目和标段的自动切换设置为false，即：projectAuto: false ，由 carouselInitData 方法重构的数据也将所有项目的标段的自动切换设置为false了。

然后，进行切换的初始触发，在 mounted 钩子函数里面做一个判断：查看第一个项目的标段数量，如果标段数量大于1，从标段开始切换。若是标段数量小于1，判断项目的个数，项目个数大于1，切项目；项目个数小于1，不动。

其次 ，标段走马灯切换方法编写，如果项目有标段，且进行了标段的切换，如果切换到最后一张走马灯，且当前项目数量大于1，则停止当前项目标段的切换，切换到下一个项目。

最后 ，项目走马灯切换方法编写，项目切换之后，触发 projectPlayChange 方法，此时，优先停止项目的切换，同时将上一个项目的标段走马灯手动切换到第一页。然后判断当前项目下标段走马灯的数量，若是大于1，切标段；反之切项目。

这样就构成了一个循环，也实现了最终的切换效果。

原理其实就是：动态修改两个嵌套走马灯的 autoplay 属性。