共计 2954 个字符，预计需要花费 8 分钟才能阅读完成。
实现思路
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 组件
车次信息展示列表
车次
目的地
发车时间
状态
{{item.trainNumber}}
{{item.destination}}
{{item.departureTime}}
{{item.status}}
暂无预测记录
效果展示
原文地址: vue3 实现无缝滚动列表（大屏数据轮播场景）
正文完
