【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以显示实时信息。探索和自定义的可能性是广泛的,您可以根据项目的需要进行调整。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/813451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python使用】python高级进阶知识md总结第8篇:TCP 网络应用程序开发流程,1. TCP 网络应用程序开发流程的介绍【附代码文档】

python高级进阶全知识知识笔记总结完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;操作系统&#xff0c;虚拟机软件。ls命令选项&#xff0c;mkdir和rm命令选项。压缩和解压缩命令&#xff0c;文件权限命令。编辑器 vim&#xff0c;软件安装。获取进程编号…

docker安装es和kibana

1.创建网络 docker network create es-net 2.下载镜像 docker pull elasticsearch:7.12.1 docker pull kibana:7.12.1 docker pull mobz/elasticsearch-head:5 3.运行容器 docker run -d \ --restartalways --name es7 \ -e "ES_JAVA_OPTS-Xms512m -Xmx512m" …

B站大数据平台元数据业务分享

背景介绍 元数据是数据平台的衍生数据&#xff0c;比如调度任务信息&#xff0c;离线hive表&#xff0c;实时topic&#xff0c;字段信息&#xff0c;存储信息&#xff0c;质量信息&#xff0c;热度信息等。在数据平台建设初期&#xff0c;这类数据主要散落于各种平台子系统的数…

Ubuntu22.04安装Opencv + opencv_contrib(v4.9.0)

需下载两个文件&#xff1a; opencv-4.9.0.tar.gzopencv_contrib-4.9.0.tar.gz 将上述文件上传到如下目录 rootf5b3d2a6bf04:/opencv# pwd /opencv rootf5b3d2a6bf04:/opencv# ll total 149036 drwxrwxr-x 2 1000 1000 4096 Apr 8 10:07 ./ drwxr-xr-x 1 root root …

【智能算法应用】哈里斯鹰算法(HHO)在WSN覆盖中的应用

目录 1.算法原理2.数学模型3.结果展示4.参考文献 1.算法原理 【智能算法】哈里斯鹰算法&#xff08;HHO)原理及实现 【智能算法应用】猎人猎物优化算法&#xff08;HPO&#xff09;在WSN覆盖中的应用 2.数学模型 3.结果展示 HPO设置区域边长为20&#xff0c;节点数为35&…

redis的三种工作模式

Redis 简介 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的高性能键值对&#xff08;key-value&#xff09;存储系统。它支持多种数据结构&#xff0c;如字符串、列表、集合、有序集合和哈希&#xff0c;并且提供了丰富的功能&#xff0c;包括数据持久化…

C语言 08 类型转换

一种类型的数据转换为另一种类型的数据&#xff0c;这种操作称为类型转换。 类型转换分为自动类型转换和强制类型转换。 自动类型转换 比如现在希望将一个 short 类型的数据转换为 int 类型的数据&#xff1a; #include <stdio.h>int main(){short s 10;// 直接将s的…

2024洗地机名牌排行榜:细数最值得买的4大热门款

传统的清洁地面方式往往费时费力&#xff0c;容易导致腰酸背痛等不适&#xff0c;给人们带来一系列家务问题。然而&#xff0c;随着洗地机、扫地机器人、吸尘器等电动清洁工具的出现&#xff0c;清洁变得更加轻松便捷&#xff0c;受到了广大用户的欢迎。身为一名有着多年家居经…

Javaweb过滤器(Filter)

一、概念 Filter表示过滤器&#xff0c;是Javaweb三大组件&#xff08;Servlet、Filter、Listener&#xff09;之一。 过滤器可以把对资源的请求拦截下来&#xff0c;从而实现一些特殊的功能。 过滤器一般完成一些通用的操作&#xff0c;比如权限控制、统一编码处理、敏感字符处…

js performance统计页面耗时

js统计页面耗时 setTimeout(() > {let t window.performance.timing;let performanceInfo [{key: "Redirect",desc: "网页重定向的耗时","value(ms)": t.redirectEnd - t.redirectStart},{key: "AppCache",desc: "检查本地缓…

一款基于AB32VG1的桌面智能坞小工具

项目简介&#xff1a; 我基于这个开发板制作了一款桌面小工具&#xff0c;它是一个小巧、功能丰富、具有实用价值的桌面物联网“控制中枢”。可以实现&#xff1a; 精灵播放音乐时内部有一颗呼吸灯的效果&#xff1b; 精灵可以通过OLED显示当前音乐名字、播放状态&#xff1b;…

Learn SRP 02

3.Editor Rendering 3.1Drawing Legacy Shaders 因为我们的管线只支持无光照的着色过程&#xff0c;使用其他不同的着色过程的对象是不能被渲染的&#xff0c;他们被标记为不可见。尽管这是正确的&#xff0c;但是它还是隐藏了场景中一些使用错误着色器的对象。所以让我们来渲…

数据库性能优化思路

说到数据库的查询效率优化问题&#xff0c;首先就能想到以下几种方式&#xff1a; 这里是说基于数据库的优化&#xff0c;还有其它的优化方式&#xff1b;比如&#xff0c;增加缓存&#xff0c;把频繁使用的数据放到redis中&#xff0c;这样可以加快速度&#xff1b;但同样会带…

IP地址的主要功能及其在网络中的重要性

在当今数字化时代&#xff0c;互联网已经成为人们生活和工作中不可或缺的一部分。而IP地址&#xff08;Internet Protocol Address&#xff09;作为互联网中的关键组成部分&#xff0c;发挥着至关重要的作用。本文将探讨IP地址的主要功能以及其在网络中的重要性。 IP地址查询&…

计算机视觉数据集——扑克识别数据集

扑克数据集 数据集地址&#xff1a;https://download.csdn.net/download/matt45m/89130302 这是一个检测扑克牌种类的数据集&#xff0c;检测种类目前只有6种&#xff0c;分别是 "queen", "ten", "nine", "king", "jack"…

短视频转gif怎么做?三十秒在线转换gif

在现在这个快节奏的时代&#xff0c;gif动画相较于长时间的视频更受大众的欢迎。当我们需要将短视频、电影等视频制作成gif动画图片的时候就可以使用gif动画图片&#xff08;https://www.gif.cn/&#xff09;制作网站-GIF中文网&#xff0c;无需下载软件&#xff0c;手机、pc均…

Spring面试题pro版-6

Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而&#xff0c;Spring的用途不仅仅限于服务器端的开发。从简单性、可测试性和松耦合性角度而言&#xff0c;绝大部分Java应用都可以从Spring中受益。 Spring中的单…

数据仓库—ETL最佳实践:提升数据集成的效率与质量

ETL&#xff08;Extract, Transform, Load&#xff09;作为数据仓库和数据集成的核心环节&#xff0c;对于确保数据的准确性、一致性和可用性至关重要。在实践中&#xff0c;遵循一些经过验证的最佳实践可以帮助企业提高ETL项目的成功率&#xff0c;优化数据处理流程&#xff0…

Redis GEO实现附近的人功能

附近的人功能是社交应用中非常常见的一项功能&#xff0c;它允许用户查找并发现他们周围的其他用户。使用Redis的GEO特性来实现这一功能是非常高效和简单的。以下是实现这一功能的基本步骤&#xff1a; 1. 准备工作 确保你的Redis服务器版本支持GEO特性&#xff08;3.2.0及以…

fs.writeFile写入文件后 通过路径获取文件 获取不到最新写入的文件

通过fs.writeFile 直接通过路径获取文件 发现一直是首次上传的图片 不是当前最新上传的图片 const fs uni.getFileSystemManager()fs.writeFile({ilePath: ${uni.env.USER_DATA_PATH}/avatar.png,data: imageData.replace(/^data:image\/\w;base64,/,),encoding: base64,succe…