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

【VUE】使用Vue和CSS动画创建滚动列表

使用Vue和CSS动画创建滚动列表

在这篇文章中,我们将探讨如何使用Vue.js和CSS动画创建一个动态且视觉上吸引人的滚动列表。这个列表将自动滚动显示项目,类似于轮播图的方式,非常适合用于仪表盘、排行榜或任何需要在有限空间内展示项目列表的应用。
在这里插入图片描述

设置

我们的滚动列表将显示各个地区及其相应的百分比值。列表中的每个项目将通过唯一的背景和进度条以视觉化方式展示其值。

HTML结构

我们首先定义Vue组件中列表的HTML结构。.chart-l-3类包裹了我们的列表,每个项目通过Vue的v-for指令在数据集dataL3中进行迭代。基本结构如下所示:

<div class="chart chart-l-3 list-box"><div v-for="(item,index) in dataL3" :key="index" :class="{'bgy':index%2==0}" class="list-item"><div :class="{'yellow':index<3}" class="tag">NO.{{ index+1 }}</div><div class="name">{{ item.name }}</div><div class="jdt-box"><div :style="{width: item.value+'%'}" class="jdt-bar"></div></div><div class="value">{{ item.value }}%</div></div>
</div>

Vue组件

Vue组件的data函数返回一个区域数组及其对应值,这些值将填充列表:

export default {data() {return {dataL3: [{ name: '广东省', value: 15 },// 更多项目],}},// 组件的其余部分...
}

动画逻辑

为了创建滚动动画,我们在mounted生命周期钩子中使用setInterval函数来操纵第一个列表项目的marginTop

mounted() {setInterval(() => {const firstDom = document.getElementsByClassName('chart-l-3')[0].getElementsByClassName('list-item')[0];this.showIndex++;if (this.showIndex === (this.dataL3.length-5)) {this.showIndex = 0;}firstDom.style.marginTop = '-' + 2.5 * this.showIndex + 'vw';}, 3000);
}

这段逻辑通过不断修改marginTop属性,创建了列表通过向上移动第一个项目而滚动的印象,从而循环显示列表。

给列表添加样式 - CSS

为了确保我们的列表看起来漂亮,我们使用less来应用各种样式,涵盖尺寸、字体、颜色和背景图像。这里的一个关键点是使用过渡效果以实现平滑滚动动画:

.list-item{transition: all 0.5s ease;.tag{background: url('./assets/icon-tag-blue.svg') no-repeat;// 更多样式...}.jdt-bar{background-color: #87f7c7;// 更多样式...}// 更多样式...
}

总结

我们的滚动列表不仅视觉上吸引人,还以动态方式展示了有限空间内的项目列表,非常适合各种应用。通过结合Vue的响应式数据绑定与CSS动画与过渡效果,我们创建了一个平滑自动滚动的列表,可以显示从排行榜排名到仪表盘信息等任何内容。

下一步

这个基本实现可以通过更多交互功能进行进一步增强,如悬停暂停功能、动态加载数据或集成API以显示实时信息。探索和自定义的可能性是广泛的,您可以根据项目的需要进行调整。

相关文章:

【VUE】使用Vue和CSS动画创建滚动列表

使用Vue和CSS动画创建滚动列表 在这篇文章中&#xff0c;我们将探讨如何使用Vue.js和CSS动画创建一个动态且视觉上吸引人的滚动列表。这个列表将自动滚动显示项目&#xff0c;类似于轮播图的方式&#xff0c;非常适合用于仪表盘、排行榜或任何需要在有限空间内展示项目列表的应…...

分布式结构化数据表Bigtable

文章目录 设计动机与目标数据模型行列时间戳 系统架构主服务器Chubby作用子表服务器SSTable结构子表实际组成子表地址组成子表数据存储及读/写操作数据压缩 性能优化局部性群组&#xff08;Locality groups&#xff09;压缩布隆过滤器 Bigtable是Google开发的基于GFS和Chubby的…...

langchain 加载 csv,json

csv from langchain_community.document_loaders.csv_loader import CSVLoaderloader CSVLoader(file_pathdata/专业描述.csv, csv_args{delimiter: ,,quotechar: ",fieldnames: [专业, 描述] }, encodingutf8, source_column专业)data loader.load() print(data)quote…...

Java-常见面试题收集(十三)

二十二 Redis 1 Redis 作用 Redis&#xff0c;全称Remote Dictionary Server&#xff0c;即远程字典服务&#xff0c;是一个开源的使用ANSI C语言编写的、支持网络的、基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。它主要用于缓存数据的计算…...

第二证券策略:股指预计维持震荡格局 关注汽车、工程机械等板块

第二证券指出&#xff0c;指数自今年2月份阶段低点反弹以来&#xff0c;3月份持续高位整理。进入4月份之后面对年报和一季报的双重财报发表期&#xff0c;预计指数短期保持高位整理概率比较大。前期缺乏成绩支撑的概念股或有回落的危险&#xff0c;主张重视成绩稳定、估值低、分…...

hcia datacom课程学习(6):路由与路由表基础

1.路由的作用 不同网段的设备互相通信需要具有路由功能的设备进行转发 具有路由功能的设备不一定是路由器&#xff0c;交换机可以有路由功能&#xff0c;同样的&#xff0c;路由器也可以有交换功能&#xff0c;像家里常用的路由器就是集路由功能和交换功能于一体的 2.路由相…...

AI PC元年,华为的一张航海图、一艘渡轮和一张船票

今天&#xff0c;从学术研究者到产业投资者&#xff0c;无不认为大模型掀起了一场人工智能的完美风暴。 所谓“完美风暴”&#xff0c;指的是一项新技术的各个要素&#xff0c;以新的方式互相影响、彼此加强&#xff0c;组合在一起形成了摧枯拉朽般的力量。 而我们每个人&#…...

NAT技术

网络技术深似海呀&#xff0c;一段时间不用又忘。 是什么 NAT技术是网络防火墙技术的一部分&#xff0c;可以作用在linux防火墙或者设备防火墙&#xff0c;NAT技术可以实现地址和端口的转换&#xff0c;主要还是为了网络连通性。 作用 存在以下三个IP&#xff0c;A(10.234.…...

新能源汽车“价格战”之后,充电桩主板市场将会怎样?

2024年2月底&#xff0c;国内新能源汽车市场开启了一场前所未有的“价格战”↓ 比亚迪率先抛出“王炸”车型——秦PLUS荣耀版和驱逐舰05荣耀版&#xff0c;起售价低至7.98万元&#xff0c;打响了价格战的“第一枪”&#xff0c;引爆了平静的汽车市场。 “电比油低”就此拉开序…...

appium driver install uiautomator2 安装失败

报错 Installing ‘uiautomator2’ using NPM install spec ‘appium-uiautomator2-driver’ Error: Encountered an error when installing package: npm command ‘install --save-dev --no-progress --no-audit --omitpeer --save-exact --global-style --no-package-lock…...

学浪已购买视频怎么下载到本地?

许多学习者在学浪购买了丰富的课程&#xff0c;然而&#xff0c;一些课程存在时间限制&#xff0c;使得学习者希望将其下载并永久保存。在这里&#xff0c;我们将介绍一款名为小浪助手的工具&#xff0c;它能够帮助你轻松将学浪已购买的视频下载到本地&#xff0c;让学习变得更…...

k8s-pod设置执行优先级

Pod的优先级管理是Kubernetes调度中的一个重要特性&#xff0c;通过PriorityClass&#xff08;优先级类&#xff09;的设置&#xff0c;我们可以为Pod指定不同的优先级&#xff0c;从而在资源有限的情况下更精细地调整调度顺序 什么是PriorityClass&#xff1f; PriorityClass是…...

const修饰指针

const修饰指针 常量指针 特点为指针的指向可以改&#xff0c;但是指针指向的值不可以修改 int a 10; int b 20; const int *p &a; *p 20; //错误&#xff0c;指针的指向的值不可更改 p &b; //正确 指针常量 特点是指针的指向不可以改&#xff0c;指针指向的值…...

php关于序列化r的指向

在PHP中&#xff0c;序列化字符串的索引是根据序列化过程中值的出现顺序来确定的。每个值&#xff08;包括数组的键和值&#xff09;在序列化字符串中都会被赋予一个顺序索引。为了理解这个顺序&#xff0c;我们需要知道以下几点&#xff1a; 序列化时&#xff0c;数组的键和值…...

从0到1实现RPC | 11 丰富测试案例

测试案例主要针对服务消费者consumer&#xff0c;复杂逻辑都在consumer端。 常规int类型&#xff0c;返回User对象 参数类型转换&#xff0c;主要实现逻辑都在TypeUtils工具类中。 测试方法重载&#xff0c;同名方法&#xff0c;参数不同 方法签名的实现&#xff0c;主要逻辑…...

在前端开发中用到了哪些设计模式?

在前端开发中用到了哪些设计模式&#xff1f; 1.单例模式2.观察者模式3.工厂模式4.适配器模式5.装饰器模式6.命令模式7.迭代器模式8.组合模式9.策略模式10.发布订阅模式 1.单例模式 确保一个类只有一个实例&#xff0c;提供一个全局访问点&#xff0c;vue就是一个单例模式&…...

ES6 的解构赋值

解构赋值&#xff08;Destructuring assignment&#xff09;是一种方便快捷的方式&#xff0c;可以从对象或数组中提取数据&#xff0c;并将数据赋值给变量。解构赋值是ES6中一项强大且常用的特性. 1. 基本数组解构 首先&#xff0c;让我们看看如何对数组进行解构赋值。假设我…...

蓝桥杯物联网竞赛_STM32L071KBU6_全部工程及国赛省赛真题及代码

包含stm32L071kbu6全部实验工程、源码、原理图、官方提供参考代码及国、省赛真题及代码 链接&#xff1a;https://pan.baidu.com/s/1pXnsMHE0t4RLCeluFhFpAg?pwdq497 提取码&#xff1a;q497...

关于UCG游戏平台的一些思考

UCG游戏平台&#xff0c;全称User Generated Content&#xff0c;即用户生成内容。它涵盖了所有玩家可以自主编辑的部分&#xff0c;包含并不限于换装、捏脸、关卡摆放等内容。 UCG概念在最近又火了起来&#xff0c;但这个模式出现的并不早。早在10多年前&#xff0c;war3编辑器…...

一起学习python——基础篇(20)

前言&#xff0c;之前经常从网上找一些免费的接口来测试&#xff0c;有点受制于人的感觉。想了想还不如直接写一个接口&#xff0c;这样方便自己测试。自己想返回什么格式就返回什么样子&#xff0c;不用担心服务报错&#xff0c;因为自己就可以完全掌控。然后宿舍二哥告诉我py…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...