当前位置: 首页 > 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…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...