当前位置: 首页 > news >正文

element ui 走马灯一页展示多个数据实现

element ui 走马灯一页展示多个数据实现

  • element ui 走马灯一页展示多个数据实现

element ui 走马灯一页展示多个数据实现

主要是对走马灯的数据的操作,先看js处理

 	let list = [{ i: 1, name: '1' },{ i: 2, name: '2' },{ i: 3, name: '3' },{ i: 4, name: '4' },]let newList = []let current = 0if (list && list.length > 0) {for (let i = 0; i <= list.length - 1; i++) {// 注意这里的2 ,可以是其他数值,看走马灯里面需要展示几个if (i % 2 !== 0 || i === 0) {if (!newList[current]) {newList.push([list[i]])} else {newList[current].push(list[i])}} else {current++newList.push([list[i]])}}}console.log(newList, 'newList')/***  结果为 * [*   [{i:1,name:'1'},  {i:2,name:'2'}],*   [{i:3,name:'3'},  {i:4,name:'4'}],* ]* * **/

看懂以上代码,应该大概知道数据的切割,我就接着继续实现页面:

在这里插入图片描述
这里面是循环两边,最外层是走马灯的循环,里面是一组数据的循环,看懂对数据的切割,就基本上看懂对走马灯里面一页展示多个数据的实现逻辑;

http://www.lryc.cn/news/488614.html

相关文章:

  • 40分钟学 Go 语言高并发:Goroutine基础与原理
  • Figma插件指南:12款提升设计生产力的插件
  • 【K8S系列】Kubernetes集群资源管理与调度 深度分析
  • delphi fmx android 离线人脸识别
  • Linux mountpoint 命令详解
  • Linux驱动开发(9):pinctrl子系统和gpio子系统--led实验
  • 用sqlmap工具打sqli-labs前20关靶场
  • 代码随想录算法训练营第二十一天 | 93.复原IP地址 | 78.子集
  • #Uniapp篇:支持纯血鸿蒙发布适配UIUI
  • 边缘提取函数 [OPENCV--2]
  • 插值原理(数值计算方法)
  • 【Pikachu】SSRF(Server-Side Request Forgery)服务器端请求伪造实战
  • IDEA怎么定位java类所用maven依赖版本及引用位置
  • Discuz论坛网站管理员的默认用户名admin怎么修改啊?
  • BIO、NIO、AIO的区别?
  • 音视频入门基础:MPEG2-TS专题(7)——FFmpeg源码中,读取出一个transport packet数据的实现
  • Flutter中sqflite的使用案例
  • 【2024 Optimal Control 16-745】【Lecture 2】integrators.ipynb功能分析
  • 【linux】ubuntu下常用快捷键【笔记】
  • 【Linux】常用命令练习
  • 力扣-Hot100-数组【算法学习day.37】
  • 表格不同类型的数据如何向量化?
  • 成都栩熙酷,电商服务新选择
  • 【java基础】微服务篇
  • 【LLM训练系列02】如何找到一个大模型Lora的target_modules
  • uni-app快速入门(八)--常用内置组件(上)
  • 基于Amazon Bedrock:一站式多模态数据处理新体验
  • FAX动作文件优化脚本(MAX清理多余关键帧插件)
  • Chapter 2 - 16. Understanding Congestion in Fibre Channel Fabrics
  • mysql数据库(六)pymysql、视图、触发器、存储过程、函数、流程控制、数据库连接池