网站建设的人性分析,影视网站建设,申请网站怎样申请,梅州建站费用多少Carousel 的应用很广泛#xff0c;基础用法这里不多做阐述#xff0c;感兴趣的可以去element-gui了解Carousel 组件。
今天主要是梳理嵌套走马灯的逻辑#xff0c;背景如下#xff1a;
需要对项目做一个展示#xff0c;项目可能有一个或多个#xff0c;同时一个项目可能…Carousel 的应用很广泛基础用法这里不多做阐述感兴趣的可以去element-gui了解Carousel 组件。
今天主要是梳理嵌套走马灯的逻辑背景如下
需要对项目做一个展示项目可能有一个或多个同时一个项目可能不包含标段也可能包含一个或多个标段。
要求 切换展示项目若是项目包含标段停止项目的切换进行标段的切换2个标段占用一个走马灯当当前项目的标段信息切换到最后一页之后切换下一个项目一直这样轮回切换。
具体效果如下所示 外层灰色框的是项目走马灯里面嵌套的是标段走马灯。
代码如下
template
!-- 嵌套走马灯示例 :initial-indexprojectIndex bidAutoArr[key]--el-carousel :interval4000 typecard width1500px height230px :autoplayprojectAuto changeprojectPlayChangeel-carousel-item v-for(item, key) in carouselData :keykeyp项目编号 {{item.projectCode}}/pp项目名称 {{item.projectName}}/pdiv classouterel-carousel :interval4000 typecard height100px :autoplayitem.bidAutoplay changebidPlayChange refbidCarouselel-carousel-item v-for(bidSection, bidSectionKey) in item.bidSections :keybidSectionKey classcontentp v-for(bidInfo,bidInfoKey) in bidSection :keybidInfoKey{{bidInfo.bidSectionCode}} : {{bidInfo.bidSectionName}}/p/el-carousel-item/el-carousel/div/el-carousel-item/el-carousel
/templatescript
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;}}}
}
/scriptstyle.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(2n1) {background-color: #d3dce6;}.content:nth-child(2n) {background-color: #1db418 !important;}.content:nth-child(2n1) {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, bidNum2) {var newData [];for(let i0; 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 j0; j bidSectionNum; j) {var bidSection originData[i].gtvBidSection.slice(j*bidNum, (j1)*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 属性。
