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

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

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.mzph.cn/bicheng/54241.shtml

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

相关文章

【机器学习】--- 自监督学习

1. 引言 机器学习近年来的发展迅猛&#xff0c;许多领域都在不断产生新的突破。在监督学习和无监督学习之外&#xff0c;自监督学习&#xff08;Self-Supervised Learning, SSL&#xff09;作为一种新兴的学习范式&#xff0c;逐渐成为机器学习研究的热门话题之一。自监督学习…

【linux-Day3】linux的基本指令<中>

【linux-Day3】linux的基本指令<中> linux下的基本指令&#x1f4e2;man&#xff1a;访问linux手册页&#x1f4e2;echo&#xff1a;把字符串写入指定文件中&#x1f4e2;cat&#xff1a;查看目标文件的内容&#x1f4e2;cp&#xff1a;复制文件或目录&#x1f4e2;mv&am…

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…

Fisco Bcos 2.11.0配置console控制台2.10.0及部署调用智能合约

Fisco Bcos 2.11.0配置console控制台2.10.0及部署调用智能合约 文章目录 Fisco Bcos 2.11.0配置console控制台2.10.0及部署调用智能合约前言版本适配一、启动FIsco Bcos区块链网络二、获取控制台文件三、配置控制台3.1 执行download_console.sh脚本3.2 拷贝控制台配置文件3.3 修…

Mac下nvm无法安装node问题

背景 最近换用mac开发&#xff0c;然后使用nvm&#xff08;版本0.40.1&#xff09;进行node安装的时候出现了一些问题 使用 nvm ls-remote发现只有 iojs 版本 原因可能是nodejs升级了某个协议导致的 解决方案 可以使用 NVM_NODEJS_ORG_MIRRORhttp://nodejs.org/dist nvm ls-re…

数据结构(八)——Java实现七大排序

一、插入排序 1.直接插入排序 public static void insertSort(int []arr){for (int i 0; i < arr.length; i) {int j i-1;int tmp arr[i];for (; j >0 ; j--) {if(arr[j] > tmp){arr[j1] arr[j];}else{break;}}arr[j1] tmp;}}直接插入排序特性总结 1. 元素集合越…

TikTok商家如何通过真人测评提高流量和销量?

在当今的社交媒体营销领域&#xff0c;TikTok&#xff08;抖音国际版&#xff09;以其独特的短视频内容和庞大的用户群体&#xff0c;成为了品牌营销和产品推广的热门平台。其中&#xff0c;真人测评作为一种有效的营销策略&#xff0c;正逐渐受到商家的青睐。本文将探讨TikTok…

华硕产品资料的查询方法

华硕网站有些奇怪&#xff0c;比如我要查询x99-pro这款已经停售的主板的资料&#xff0c;在它的首页搜索&#xff0c;搜索结果为空&#xff1a; 然后在服务支持和下载中心&#xff0c;同样搜不到。 经高人指点&#xff0c;用下面的方法&#xff0c;可以搜到&#xff1a; https…

微信小程序页面制作——婚礼邀请函(含代码)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

web基础—dvwa靶场(四)​File Inclusion

File Inclusion(文件包含) 有些 web 应用程序允许用户指定直接文件流的输入&#xff0c;或允许用户将文件上载到服务器。稍后 web 应用程序访问 web 应用程序上下文中用户提供的输入。通过这样种操作&#xff0c;web 应用程序允许恶意文件执行。 如果选择要包含的文件是目标计…

【Hot100】LeetCode—51. N 皇后

目录 1- 思路题目识别回溯 2- 实现⭐51. N 皇后——题解思路 3- ACM 实现 原题链接&#xff1a;51. N 皇后 1- 思路 题目识别 识别1 &#xff1a;给定一个整数 n &#xff0c;求解如何放置棋子的问题。 回溯 回溯三部曲 1- 回溯参数和返回值 传参 cheeseBoard、n、row 传递…

如何设置 Django 错误邮件通知 ?

Django 是一个强大的 web 框架&#xff0c;非常适合那些想要完美快速完成任务的人。它有许多内置的工具和特性&#xff0c;一个有用的特性是 Django 可以在出现错误时发送电子邮件提醒。这对开发人员和管理员非常有用&#xff0c;因为如果出现问题&#xff0c;他们会立即得到通…

改编pikachu的打靶经历(题目不全)

前言 题目很少&#xff0c;只做了一些。正常版本的&#xff0c;完整的pikachu可参考下面这个师傅写的 https://www.cnblogs.com/henry666/p/16947270.html xss &#xff08;get&#xff09;反射xss 先尝试 1 这里有长度限制&#xff0c;而且&#xff0c;我改了长度&#xf…

MySQL_数据类型简介

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…

文生视频算法

文生视频 Sora解决问题&#xff1a;解决思路&#xff1a; CogVideoX解决问题&#xff1a;解决思路&#xff1a; Stable Video Diffusion&#xff08;SVD&#xff09;解决问题&#xff1a;解决思路&#xff1a; 主流AI视频技术框架&#xff1a; Sora Sora: A Review on Backg…

Double Write

优质博文&#xff1a;IT-BLOG-CN 一、存在的问题 为什么需要Double Write&#xff1a; InnoDB的PageSize是16kb&#xff0c;其数据校验也是针对这16KB来计算的&#xff0c;将数据写入磁盘是以Page为单位的进行操作的。而计算机硬件和操作系统&#xff0c;写文件是以4KB作为基…

新能源汽车充电基础设施大爆发

新能源汽车充电基础设施迈入新阶段&#xff1a;全国总量破千万&#xff0c;未来五年将翻番增长 截至2024年7月底&#xff0c;全国充电设施总量已达到1060万台&#xff0c;为超过2500万辆新能源汽车提供了充电服务。目前&#xff0c;95%的高速公路服务区已具备充电功能&#xf…

MySql的基础讲解

一、初识MySql 数据库&#xff1a;按照数据结构来组织、存储和管理数据的仓库&#xff1b;是一个长期存储在计算机内的、有组织的、可共享 的、统一管理的大量数据的集合&#xff1b; OLTP&#xff1a;联机事务处理&#xff0c;主要是对数据库的增删改查。 OLTP 主要用来记录…

禁忌搜索算法(TS算法)求解实例---旅行商问题 (TSP)

目录 一、采用TS求解 TSP二、 旅行商问题2.1 实际例子&#xff1a;求解 6 个城市的 TSP2.2 **求解该问题的代码**2.3 代码运行过程截屏2.4 代码运行结果截屏&#xff08;后续和其他算法进行对比&#xff09; 三、 如何修改代码&#xff1f;3.1 减少城市坐标&#xff0c;如下&am…

关于安卓App自动化的一些想法

安卓App自动化一般使用PythonAppium。页面元素通常是使用AndroidStudio中的UI Automator Viewer工具来进行页面元素的追踪。但是这里涉及到一个问题就是&#xff0c;安卓apk在每次打包的时候&#xff0c;会进行页面的混淆以及加固&#xff0c;所以导致每次apk打包之后会出现页面…