vue3实现无缝滚动列表(大屏数据轮播场景)
实现思路
vue3目前可以通过第三方组件来实现这个需求。
下面介绍一下这个第三方滚动组件--vue3-scroll-seamless
vue3-scroll-seamless是一个用于 Vue 3 的插件,用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新闻滚动、图片展示等场景。
主要特性和用法
-
无缝滚动:在内容超出容器宽度或高度时,可以实现自动无缝滚动,形成连续的视觉效果。
-
多种配置选项:提供了多种配置选项来控制滚动的速度、方向、内容显示方式等。
-
响应式支持:支持响应式设计,可以根据父容器的大小自动调整内容的显示和滚动效果。
-
灵活的内容布局:内容可以是任意的 Vue 组件或 HTML 元素,可以自定义每一项的样式和内容。
-
事件和方法:支持一些事件回调和方法,例如滚动到指定位置、开始、暂停、重新开始滚动等。
官网地址:vue3-scroll-seamless | vue3-scroll-seamless (xiaofulzm.github.io)
建议去参考网文档使用。
无缝滚动列表实现
安装依赖
npm install vue3-scroll-seamless --save
main.js/ts导入
// 导入Vue3 Scroll Seamless组件
import {vue3ScrollSeamless} from "vue3-scroll-seamless";// 注册 Vue3 Scroll Seamless 组件
app.component('vue3ScrollSeamless',vue3ScrollSeamless)// 挂载Vue应用
app.mount('#app')
实现代码示例
以上代码用到了element-plus的el-row和el-col组件
<script lang="ts" setup>
import { reactive } from "vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
const list = reactive([{ trainNumber: 'G1234', destination: '北京南', departureTime: '09:00', status: '准点' },{ trainNumber: 'G5678', destination: '上海虹桥', departureTime: '09:15', status: '准点' },{ trainNumber: 'D4321', destination: '广州南', departureTime: '09:30', status: '晚点' },{ trainNumber: 'G8765', destination: '成都东', departureTime: '09:45', status: '准点' },{ trainNumber: 'G9876', destination: '西安北', departureTime: '10:00', status: '准点' },{ trainNumber: 'D6543', destination: '深圳北', departureTime: '10:15', status: '准点' },{ trainNumber: 'G2345', destination: '重庆北', departureTime: '10:30', status: '晚点' },{ trainNumber: 'G1111', destination: '天津西', departureTime: '10:45', status: '准点' },{ trainNumber: 'G2222', destination: '南京南', departureTime: '11:00', status: '晚点' },{ trainNumber: 'D3333', destination: '杭州东', departureTime: '11:15', status: '准点' },{ trainNumber: 'G4444', destination: '武汉', departureTime: '11:30', status: '准点' },{ trainNumber: 'G5555', destination: '济南西', departureTime: '11:45', status: '准点' },{ trainNumber: 'D6666', destination: '长沙南', departureTime: '12:00', status: '晚点' },{ trainNumber: 'G7777', destination: '南昌西', departureTime: '12:15', status: '准点' },{ trainNumber: 'G8888', destination: '沈阳北', departureTime: '12:30', status: '准点' },{ trainNumber: 'D9999', destination: '福州南', departureTime: '12:45', status: '准点' },{ trainNumber: 'G1010', destination: '哈尔滨西', departureTime: '13:00', status: '晚点' }]);
const classOptions = reactive({step: 0.5,//滚动速度值越大越快,但是值太小会卡顿limitMoveNum: list.length,//无缝滚动列表元素的长度,一般设置为列表的长度direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。});</script><template><div class="demo"><div class="title-container"><div class="title">车次信息展示列表</div></div><div class="table-header"><div class="header"><el-row><el-col :span="6" class="center"><div>车次</div></el-col><el-col :span="6" class="center"><div>目的地</div></el-col><el-col :span="6" class="center"><div>发车时间</div></el-col><el-col :span="6" class="center"><div>状态</div></el-col></el-row></div></div><vue3ScrollSeamless class="scroll-wrap border text-color" :classOptions="classOptions" :dataList="list"><div v-if="list.length > 0"><el-row v-for="(item, i) of list" :key="i"><el-col :span="6" class="center"><div>{{ item.trainNumber }}</div></el-col><el-col :span="6" class="center"><div>{{ item.destination }}</div></el-col><el-col :span="6" class="center"><div style="width: 30px;">{{ item.departureTime }}</div></el-col><el-col :span="6" class="center"><div style="width: 30px;">{{ item.status }}</div></el-col></el-row></div><div v-if="list.length == 0"style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">暂无预测记录</div></vue3ScrollSeamless></div>
</template>
<style scoped>
.title-container {display: flex;align-items: center;justify-content: center;height: 30px;margin-bottom: 20px;
}.title {font-size: 19px;
}.demo {width: 100%;height: 100%;
}.scroll-wrap {width: 100%;height: 300px;margin: 0 auto;overflow: hidden;background-color: rgb(0, 5, 38, 0.5);font-size: 15px;
}.table-header {font-family: Arial, sans-serif;height: 40px;display: flex;align-items: center;border: 1px solid rgb(13, 162, 221);background-color: rgba(3, 137, 174, 0.5);
}.header {width: 100%;font-size: 16px;
}.border {border: 1px solid rgb(13, 162, 221);
}.center {display: flex;align-items: center;justify-content: center;}.text-color {color: rgb(128, 250, 124);
}
</style>
效果展示

相关文章:
vue3实现无缝滚动列表(大屏数据轮播场景)
实现思路 vue3目前可以通过第三方组件来实现这个需求。 下面介绍一下这个第三方滚动组件--vue3-scroll-seamless vue3-scroll-seamless 是一个用于 Vue 3 的插件,用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新…...
element ui ts table重置排序
#日常# 今天带的实习生,在遇到开发过程中,遇到了element ui table 每次查询的时候都需要重置排序方式,而且多个排序是由前端排序。 <el-table :data"tableData" ref"restTable"> </<el-table> <script…...
python热门面试题三
面试题1:Python中的列表推导式是什么?请给出一个例子。 回答: 列表推导式(List Comprehension)是Python中一种非常强大且简洁的构建列表的工具。它允许你通过一个表达式来创建一个新的列表,这个表达式定义…...
sql monitoring 长SQL ASH AWR 都没有 未Commit or export to csv
Duration 4小时, Database Time 22.5, Session Inactive, 1.未Commit原因, 2.慢慢导出成csv文件? How is v$session status INACTIVE and v$sql_monitor status EXECUTING concurrently 2641811 Posts: 8 Jan 11, 2016 6:47P…...
算法学习day12(动态规划)
一、不同的二叉搜索树 二叉搜索树的性质:父节点比左边的孩子节点都大;比右边的孩子节点都小; 由图片可知,dp[3]是可以由dp[2]和dp[1]得出来的。(二叉搜索树的种类和根节点的val有关) 当val为1时,左边是一定没有节点的…...
Vue 3 <script setup> 使用v-bind(或简写为 :)来动态绑定图片的 src 属性
<img :src"images[currentIndex]" > <template> <div> <!-- 使用 v-bind 或简写为 : 来动态绑定图片的 src 属性 --> <img :src"images[currentIndex]" alt"Dynamic Image" style"width: 100px; height: a…...
前端Vue自定义签到获取积分弹框组件设计与实现
摘要 随着前端技术的不断演进,开发的复杂性日益凸显。传统的整体式开发方式在面临功能迭代和修改时,常常牵一发而动全身,导致开发效率低下和维护成本高昂。组件化开发作为一种解决方案,通过实现模块的独立开发和维护,…...
闲置服务器废物利用_离线下载_私人影院_个人博客_私人云笔记_文件服务器
背景 家里有台旧windows笔记本,PentiumB940 2.00GHz的cpu 4G内存,512G硬盘 放在家里吃灰很久,最近几个月折腾折腾,装了linux操作系统,换了一个2T的硬盘 这里记录下折腾的过程,有需要的可以参考 开通公网IP 打电话给运营商一般都可…...
【Python学习笔记】调参工具Optuna + 泰坦尼克号案例
【Python学习笔记】调参工具Optuna&泰坦尼克号案例 背景前摇:(省流可不看) 最近找了份AI标注师的实习,但是全程都在做文本相关的活,本质上还是拧螺丝,就想着学点调参、部署什么的技能增加一些竞争力&a…...
GPT带我学-设计模式13-策略模式
概述 策略模式 例子 你可以创建一个策略工厂(Strategy Factory)来根据传入的 orgId 动态地选择合适的策略。以下是实现示例: 首先,定义策略接口和具体策略类: public interface CardPathStrategy {String generat…...
【Linux】Ubuntu配置JDK环境、MySQL环境
一、 Ubuntu配置JDK环境 在Ubuntu系统中安装JDK 8可以通过以下步骤进行: 打开终端。更新包列表: sudo apt update安装OpenJDK 8: sudo apt install openjdk-8-jdk验证安装是否成功: java -version注:如果系统中安…...
【ElasticSearch】ES 5.6.15 向量插件支持
参考 : https://github.com/lior-k/fast-elasticsearch-vector-scoring 下载插件 安装插件 插件目录: elasticsearch/plugins, 安装后的目录如下 plugins└── vector├── elasticsearch-binary-vector-scoring-5.6.9.jar└── plugin-descriptor.properties修…...
Kafka 高并发设计之数据压缩与批量消息处理
《Kafka 高性能架构设计 7 大秘诀》专栏第 6 章。 压缩,是一种用时间换空间的 trade-off 思想,用 CPU 的时间去换磁盘或者网络 I/O 传输量,用较小的 CPU 开销来换取更具性价比的磁盘占用和更少的网络 I/O 传输。 Kafka 是一个高吞吐量、可扩展…...
设计模式使用场景实现示例及优缺点(行为型模式——模板方法模式)
模板方法模式(Template Method Pattern) 模板方法模式(Template Method Pattern)是一种行为设计模式,它定义了一个操作中的算法的骨架,将算法的一些步骤延迟到子类中。这样可以在不改变算法的结构的前提下…...
ETL数据集成丨主流ETL工具(ETLCloud、DataX、Kettle)数据传输性能大PK
目前市面上的ETL工具众多,为了方便广大企业用户在选择ETL工具时有一个更直观性能方面的参考值,我们选取了目前市面上最流行的三款ETL工具(ETLCloud、DataX、Kettle)来作为本次性能传输的代表,虽然性能测试数据有很多相…...
eNSP:防火墙设置模拟公司配置(二)
实验拓扑: 实验要求(二): 7: 办公设备可以通过电信连接和移动上网(多对多NAT,并且需要保留一个公网IP) 8: 分公司通过公网移动电信,访问DMZ的http服务器 9&a…...
vue3 两个组件之间传值
Props 父组件可以通过 props 将数据传递给子组件。这是最常见的组件间通信方式 <!-- 父组件 --><template><ChildComponent :message"parentMessage" /></template><script>import ChildComponent from ./ChildComponent.vue;export…...
基于matlab的深度学习案例及基础知识专栏前言
专栏简介 内容涵盖深度学习基础知识、深度学习典型案例、深度学习工程文件、信号处理等相关内容,博客由基于matlab的深度学习案例、matlab基础知识、matlab图像基础知识和matlab信号处理基础知识四部分组成。 一、 基于matlab的深度学习案例 1.1、matlab:基于模…...
机器学习——L1 L2 范数 —>L1 L2正则化
1、L1范数和L2范数是机器学习和数据分析中经常使用的两种范数,它们之间存在多个方面的区别。 以下是关于L1范数和L2范数区别的详细解释: 一、定义差异 L1范数:也被称为曼哈顿范数,是向量元素的绝对值之和。对于一个n维向量x&am…...
大模型时代,还需要跨端framework吗?
跨端 在我近十年的大前端从业经验中,有一半是在和flutter/rn打交道。虽然,flutter和rn官方和社区已经在非常努力的优化、填坑了,但是这两者的坑还是远远高于原生开发。 但是,在锁表的大周期下,华为带着鸿蒙来了&#…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
GAN模式奔溃的探讨论文综述(一)
简介 简介:今天带来一篇关于GAN的,对于模式奔溃的一个探讨的一个问题,帮助大家更好的解决训练中遇到的一个难题。 论文题目:An in-depth review and analysis of mode collapse in GAN 期刊:Machine Learning 链接:...
在Spring Boot中集成RabbitMQ的完整指南
前言 在现代微服务架构中,消息队列(Message Queue)是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件,支持多种消息协议,具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...
【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统:网关转发与混合调度实战
🧠关键词:Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者:希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计:5300+ 字 🧭 背景与需求 在许多 IoT 项目中,单一通信方式往往难以兼顾近场数据采集…...
