【可视化大屏系列】数据列表自动滚动效果

要实现列表的自动滚动效果,这里提供两种解决方案:

1.vue插件

官方文档:链接: vue-seamless-scroll
(1)安装依赖

npm install vue-seamless-scroll --save

(2)全局注册(main.js中)

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

(3)使用

<!-- 配置  -->
<vue-seamless-scroll></vue-seamless-scroll>

效果如图:
在这里插入图片描述

2.dataV

官网链接: 轮播表

效果如图:
在这里插入图片描述
具体代码自行官网研究,这里只做简单实现思路记录。
其实,就个人使用体验来讲,更推荐使用第二种方案,因为方案一在调试页面样式高度自适应的时候,总是失败,无奈只好写固定像素,大概率是我自己学艺不精吧。方案二就基本不存在这种问题。所以推荐用DataV,既能快速实现需求功能,又可以精简很多代码量,效率upupup。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Mysql调优之性能监控(一)

前言&#xff1a; 官网就是最好的老师&#xff1a;MySQL&#xff0c;里面各种语法跟参数跟性能调试工具 一、使用show profile查询剖析工具 -- 开启 SET profiling 1; -- 关闭 SET profiling 0; -- 显示查询的性能分析信息 show profiles; -- 显示具体查询id的执行步骤耗时 S…

linux文件系统权限详解

注:目录的执行权限代表是否可以进入。 一、文件权限控制对文件的访问: 可以针对文件所属用户、所属组和其他用户可以设置不同的权限 权限具有优先级。user权限覆盖group权限,后者覆盖other权限。 有三种权限类别:读取、写入和执行 读权限:对文件:可读取文件…

Django_Vue3_ElementUI_Release_003_前端Vue3项目初始化

1. 概念扫盲 Node.js是基于ChromeV8引擎&#xff0c;让JS在服务端运行的开发平台&#xff0c;就是JS的一种解释器WebPack就是模块打包机&#xff0c;把浏览器不能直接运行的拓展语言找到并打包为合适的格式给浏览器直接使用Vue基于WebPack构件项目的&#xff0c;并带有合理默认…

【网络】TCP/IP 五层网络模型:网络层

最核心的就是 IP 协议&#xff0c;是一个相当复杂的协议 TCP 详细展开讲解&#xff0c;是因为 TCP 确实在开发中非常关键&#xff0c;经常用到&#xff0c;IP 则不同&#xff0c;和普通程序猿联系比较浅。和专门开发网络的程序猿联系比较紧密&#xff08;开发路由器&#xff0…

2022高教社杯全国大学生数学建模竞赛C题 问题一(2) Python代码演示

目录 1.2 结合玻璃的类型,分析文物样品表面有无风化化学成分含量的统计规律数据预处理绘图热力图相关系数图百分比条形图箱线图小提琴图直方图KED图描述性统计分析偏度系数峰度系数其它统计量1.2 结合玻璃的类型,分析文物样品表面有无风化化学成分含量的统计规律 数据预处理 …

使用java程序生成具有3D效果的图片

程序功能 图像初始化&#xff1a;创建一个800x800像素的 BufferedImage 对象&#xff0c;并使用 Graphics2D 进行绘图操作。 光照效果&#xff1a;使用 RadialGradientPaint 实现径向渐变效果&#xff0c;模拟从图片中心向外扩散的光照&#xff0c;使图片有深度感&#xff0c;…

Maven 解析:打造高效、可靠的软件工程

Apache Maven【简称maven】 是一个用于 Java 项目的构建自动化工具&#xff0c; 通过提供一组规则来管理项目的构建、依赖关系和文档。 1.Pre-预备知识&#xff1a; 1.1.Maven是什么&#xff1f; [by Maven是什么&#xff1f;有什么作用&#xff1f;Maven的核心内容简述_ma…

【数据结构与算法 | 灵神题单 | 自顶向下DFS篇】力扣1022,623

1. 力扣1022&#xff1a;从根到叶的二进制之和 1.1 题目&#xff1a; 给出一棵二叉树&#xff0c;其上每个结点的值都是 0 或 1 。每一条从根到叶的路径都代表一个从最高有效位开始的二进制数。 例如&#xff0c;如果路径为 0 -> 1 -> 1 -> 0 -> 1&#xff0c;那…

通过sshd_config限制用户登录

在CentOS Stream或其他现代的Linux发行版中&#xff0c;你可能会发现传统的hosts.deny和 hosts.allow文件已经不存在或不被使用。这是因为随着时间的推移&#xff0c;系统的安全策略和网络管理工具已经发生了演变&#xff0c;许多系统管理员和发行版维护者选择使用更现代、更灵…

Mac 上,终端如何开启 proxy

前提 确保你的浏览器可以访问 google&#xff0c;就是得先有这个能力 步骤 查看网络的 http/https 还有 socks5 的 port配置 .zshrc 查看 port 点击 wifi 设置 以我的为例&#xff0c;我的 http/https 都是 7890&#xff0c; socks5 是 7891 查看代理的port 以我的软件…

Ubuntu24.04部署docker

1、更新软件 apt update 2、安装curl apt install apt-transport-https curl 3、导入阿里云GPG秘钥 curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg 4、添加Docker阿里云仓库到Ubuntu 24.04的…

Latex2024 下载安装运行HelloWorld—全流程笔记

LaTex安装教程&#x1f680; 这是读博之后写的第一篇文章&#xff0c;来到新课题组之后&#xff0c;新课题组主要是用Latex&#xff0c;在之前的课题组&#xff0c;还是比较常用world&#xff0c;所以就研究了一下Latex的下载和安装&#xff0c;还有配置以及卸载&#xff0c;虽…

什么是Bean的循环依赖?解决方案是什么?

Spring Bean循环依赖以及解决方案&#xff1a; 什么是Bean的循环依赖? A对象中有B属性。B对象中有A属性。这就是循环依赖。我依赖你&#xff0c;你也依赖我。 如图所示&#xff0c;Father类中有Son属性的成员变量&#xff0c;Son类中有Father属性的成员变量。这就是循环依赖…

集群聊天服务器项目【C++】(六)MySql数据库

前面已经介绍了网络模块和业务模块&#xff0c;本章介绍数据模块&#xff0c;同样保持模块解耦的特性&#xff0c;即业务模块不能出现数据模块内容&#xff0c;如出现SQL语句&#xff0c;接下来看看怎么实现的。 1.环境安装 第一章已经介绍了MySql安装&#xff0c;但注意需要…

re题(24)BUUFCTF-[WUSTCTF2020]level1

BUUCTF在线评测 (buuoj.cn) 放到ida 这是下载的文本 逻辑比较简单&#xff0c;写个脚本 p[198,232,816,200,1536,300,6144,984,51200,570,92160,1200,565248,756,1474560,800,6291456,1782,65536000] for i in range(1,20):if (i & 1) ! 0 :p[i-1]chr(p[i-1] >> i)…

NVM(node.js版本工具)的使用

1.nvm是什么 NVM 是 Node Version Manager 的缩写&#xff0c;它是一个用于管理 Node.js 版本的命令行工具。通过NVM&#xff0c;你可以在同一台机器上安装和切换多个 Node.js 版本&#xff0c;对于开发和测试在不同 Node.js 版本上运行的应用程序非常有用。 2.下载 下载之前…

Linux:vim编辑技巧

命令模式 光标跳转 输入18&#xff0c;再输入G&#xff0c;可以跳转到18行。 复制、粘贴、删除 P是往上一行粘贴 小写u可以撤销 查找/撤销/保存 大写U可能失效&#xff0c;用CTRLr 末行模式 保存/退出/文件操作 字符串替换 开关参数的控制

AJAX 入门 day3

目录 1.XMLHttpRequest 1.1 XMLHttpRequest认识 1.2 用ajax发送请求 1.3 案例 1.4 XMLHttpRequest - 查询参数 1.5 XMLHttpRequest - 数据提交 2.Promise 2.1 Promise认识 2.2 Promise - 三种状态 2.3 案例 3.封装简易版 axios 3.1 封装_简易axios_获取省份列表 3…

FloodFill算法【下】

417. 太平洋大西洋水流问题 题目链接&#xff1a;417. 太平洋大西洋水流问题 题目解析 题目给我们一个矩阵&#xff0c;这个矩阵相当于陆地&#xff0c;被两个洋包围&#xff0c;左和上代表太平洋&#xff0c;右和下代表大西洋。 矩阵里面的数字代表海拔&#xff0c;水可以…

【磨皮美白】基于Matlab的人像磨皮美白处理算法,Matlab处理

博主简介&#xff1a;matlab图像代码项目合作&#xff08;扣扣&#xff1a;3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于Matlab的图像磨皮美白处理&#xff0c;用matlab实现。 一、案例背景和算法介绍 …