【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;软件安装。获取进程编号…

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

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

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

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

C语言 08 类型转换

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

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

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

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

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

Learn SRP 02

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

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均…

OSCP靶场--Fail

OSCP靶场–Fail 考点(rsync未授权覆盖公钥Fail2ban提权) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC 192.168.153.126 -p- -Pn --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-12 23:34 EDT Warning: 192.168.153.126 giving …

招生管理|基于SprinBoot+vue的招生管理系统系统设计与实现(源码+数据库+文档)

招生管理目录 基于SprinBootvue的招生管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 前台 后台 教师权限 学生权限&#xff1a; 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff…

大数据------JavaWeb------JDBC(完整知识点汇总)

JDBC 定义 全称为Java数据库连接&#xff08;Java DataBase Connectivity&#xff09;&#xff1a;是使用java语句来操作所有关系型数据库的一套API JDBC本质 它是官方定义的一套操作所有关系型数据库的规则&#xff08;即接口&#xff09;&#xff0c;各个数据库厂商会去实现…

VLC-Qt实现简单的视频播放器

VLC-Qt是一个结合了Qt应用程序和libVLC的免费开源库。它提供了用于媒体播放的核心类&#xff0c;以及用于快速开发媒体播放器的GUI类。由于集成了整个libVLC&#xff0c;VLC-Qt具备了libVLC的所有特性&#xff0c; 例如&#xff1a;libVLC实例和播放器、单个文件和列表播放、音…

.NET i18n 多语言支持与国际化

环境 WIN10 VS2022 .NET8 1.&#x1f44b;创建项目 2.&#x1f440;创建Resources Controllers HomeController.en.resx HomeController.fr.resx HomeController.zh.resx 3.&#x1f331;Program.cs添加国际化支持 // 添加国际化支持 builder.Services.AddLocalization(…

6.Hexo标签插件和资产文件夹

标签插件 标签插件&#xff0c;基本上是只是一些小的代码片段&#xff0c;可以将他们添加到markdown文件中 以便添加特定的代码&#xff0c;不需要编写复杂或混乱的HTML 当很多时候想要在markdown页面添加一些特殊元素&#xff0c;通常必须使用HTML 如果不想这么用HTML&#…

CSS特效---百分比加载特效

1、演示 2、一切尽在代码中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title&…

公众号文章如何添加多个附件?

在公众号分享一些文档给粉丝下载&#xff0c;有那么几种方式。比如把文档转成超链接&#xff0c;放在公众号的“阅读原文”处&#xff0c;或者把文件转成二维码&#xff0c;贴在公众号文章里面。这两种方式其实都需要先把文件转成超链接&#xff08;网页链接&#xff09;&#…

【目标检测数据集】VOC2007 数据集介绍

一、介绍 VOC 数据是 PASCAL VOC Challenge 用到的数据集&#xff0c;官网&#xff1a;http://host.robots.ox.ac.uk/pascal/VOC/ 备注&#xff1a;VOC数据集常用的均值为&#xff1a;mean_RGB(122.67891434, 116.66876762, 104.00698793) Pytorch 上通用的数据集的归一化指…

OVITO-2.9版本

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩&#xff01; 主要专栏内容包括&#xff1a; †《LAMMPS小技巧》&#xff1a; ‾ \textbf…