嵌套走马灯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 属性。

嵌套走马灯Carousel相关推荐

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码
用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码 <template><el-carousel ...
element走马灯自动_详细element-ui的走马灯carousel轻松实现自适应全屏banner详细过程...
div部分 CSS部分 .bannerImg{ width: 100%; height: inherit; min-height: 600px; min-width: 1400px; } vue.JS ...
node-vue前后端分离记录
node vue项目开发看了近一周的vue开发,有诸多感触,我之前接触过react.angular所以特别想学学久仰大名的vue.学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指 ...
引入react文件报错_React Native常见问题(一)
以下是在开发产品3个月以来遇到多的问题,希望可以帮助到遇到同样问题的小伙伴们一 node端口被占用(找不到入口): lsof -i:3009:查看所有3009端口 kill -9 14937 干掉1 ...
前端 UI 设计原则（基于Ant-design）
前端 UI 设计原则(基于Ant-design) 本文摘录自:AntDesign官网 1. 设计原则 1.1 亲密性纵向关系:三种间隔横向关系:栅格布局 1.2 对齐 Law of Continuit ...
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
Vue3+TS+Vite开发组件库并发布到npm 网站在线预览: Vue Amazing UI | Amazing UI Components LibraryAmazing UI 组件库https:/ ...
iview的走马灯嵌套在模态框中，宽度为0的解决方案
在项目开发中用到了iview的走马灯嵌套在模态框中这种需求,结果发现走马灯图片不显示,打开控制台审查元素发现走马灯的内部盒子width为0,自己感觉在页面初始化的时候,因为模态框初始值为false,所 ...
element走马灯自动_Element Carousel 走马灯的具体实现
本文来源于Element官方文档: 基础用法普通走马灯默认 Hover 指示器触发 {{ item }} Click 指示器触发 {{ item }} 组件- 走马灯基础用法默认 Hover ...
使用 iview 实现PC端生成推广海报与二维码并下载的功能，基于iview Modal 对话框与 Carousel 走马灯组件实现
使用 iview 实现PC端生成推广海报与二维码并下载的功能,基于iview Modal 对话框与 Carousel 走马灯组件实现前言:最近在对公司网页进行改版的时候遇到一个问题,需要在PC端实 ...

嵌套走马灯Carousel

嵌套走马灯Carousel相关推荐

最新文章

热门文章