Vue3 - 超详细实现文字上下滚动功能效果，类似网站公告文字循环翻滚、中将人员名单公布上下无限滚动效果（支持鼠标移入时悬停停止滚动、接口动态数据渲染、自由DIY样式等）

已于 2025-01-19 16:48:13 修改
阅读量5.6k 收藏 12
点赞数 4
分类专栏： + Vue3 文章标签： vue3 文字滚动公告功能源码 vue3实现文本上下翻滚效果 vue3网站网页文字循环翻滚 当鼠标移入时停止文字滚动翻滚 vue3喇叭告示效果文字翻页示 vue3文字公告无缝滚动通知
于 2023-10-31 15:47:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/134093869
版权
+ Vue3 专栏收录该内容
254 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍如何在 Vue3 中实现文字上下无限滚动效果，类似公告栏和名单公布，支持鼠标移入停止滚动。提供组件源码，允许自定义样式和数据接口动态渲染。同时提醒修改CSS高度参数后需刷新页面，以及避免在组件内直接修改样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

如果您是 Vue2 项目，请访问 这篇文章。

本文 实现了在 vue3.js 项目中，实现文本的上下无限翻滚效果，类似公告栏和获奖名单人员等（文字内容无缝向上滚动 / 支持开启和关闭鼠标移入停止滚动和鼠标离开继续滚动）

您直接复制示例代码，稍微改改样式就能用了，

如下图所示，以组件的形式完成该功能，您只需要将数据传递给组件即可实现。

详细示例代码，无任何乱七八糟的无用代码

在这里插入图片描述

组件源码

组件位置无所谓，后面用的时候正确引入即可。

了解本专栏 订阅专栏 解锁全文
vue实现文本上下循环滚动
日常笔记/总结/系列知识梳理
12-20 1600
页面上有两块公告，需要循环滚动，最初使用animation实现了，但如果两块公告的条数不一致的话，就会导致两块公告滚动的快慢不同，由此需要换种方式实现，使两块公告始终以同样的快慢节奏滚动。
vue3 - 实现文字横向滚动 / 垂直翻滚功能组件，类似喇叭广告、公告、跑马灯的文字滚动效果（详细组件源码与注释，一键复制开箱即用！）
高级前端工程师
05-10 1万+
vue3横向文字滚动，vue3垂直纵向文字滚动效果，vue3横向滑动组件插件，vue3文本横向滚动，vue3实现公告文字横向滚动，vue3 实现广告文字滚动详细教程，vue3文字横向滚动公告，vue3文字垂直翻滚滚动组件，vue3如何做垂直文字滚动效果，vue3文字公告横向滚动插件，Vue3如何实现跑马灯样式文字横向滚动，vue3滚动公告如何实现，vue3文字公告自动横向循环滚动，vue3 横向滚动组件，vue3文字横向循环滚动效果示例代码，vue3实现文字超过宽度横向循环滚动，vue3中如何文字横屏无缝滚
vue3（实现上下无限来往滚动）
weixin_62639453的博客
05-04 2283
一般在大屏项目中，很常见的效果，就是容器中的内容缓慢地向下移动，指导底部停止，然后快速滚动回顶部，然后接着缓慢滚动到底部。并且在特定的情况下，还需要进行一些小交互，那就还得让他停下来，当鼠标移入的时候，停止滚动，当鼠标移开的时候，继续从停止的地方接着滚动。如此反复。
vue实现公告栏文字上下滚动效果的示例代码
10-15
主要介绍了vue实现公告栏文字上下滚动效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 3 自定义指令：实现自动滚动效果
最新发布
weixin_63115449的博客
03-21 939
指令的主要功能是监听页面大小的变化，并根据内容的宽度和容器的宽度自动为文本内容添加或移除滚动动画的 CSS 类。当内容宽度超出容器宽度时，它会为内容添加一个滚动动画类，使得文本能够在容器中自动滚动展示；而当内容宽度小于或等于容器宽度时，它则会移除滚动动画类，避免不必要的动画效果。通过本文的深入解析，我们了解了 Vue 3 自定义指令的实现原理、使用方法以及它的优势和应用场景。这个指令为我们提供了一种简单而有效的解决方案，用于在有限的空间内展示较长的文本内容，并且能够自动适应不同的屏幕尺寸。
Vue3文字滚动（TextScroll）
热门推荐
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-18 1万+
文字滚动轮播组件，支持：水平文字滚动；垂直文字滚动；单条文字滚动；自定义样式；自定义链接悬浮样式；自定义展示条数和间距；自定义滚动速度；使用Methods开始、暂停、重置滚动；鼠标移入是否暂停滚动等；总之，功能丰富，简单易用😁😁
Vue3文字实现左右和上下滚动
ZJ15981837003的博客
08-02 2696
Vue3文字实现左右和上下滚动
vue实现文字上下滚动
qq_33404590的博客
02-06 875
vue实现文字上下滚动。
vue实现公告栏文字上下滚动效果
qq_36716000的博客
11-20 2273
<template> <div> <h2>公告栏文字停顿滚动</h2> <div class="textBox"> <transition name="slide"> <p class="text" :key="text.id" ...
CSS/JS文字滚动
努力的nana
10-25 1111
【代码】CSS/JS文字滚动。
文字上下无缝滚动
07-16
纯javascript制作，文字上下无缝滚动。
vue实现文案上下滚动
weixin_52492583的博客
11-14 485
如：要滚动的数据[1,2,3,4,5,6,7] ---------处理后的数据[1,2,3,4,5,6,7,1]注：传入的数据需要处理将第一项 push到最后一项。
Vue3实现公告滚动效果
weixin_52102740的博客
04-07 1573
工具：vue3 + ts + element-plus。
Vue3 简单的实现文字无限滚动
z1037499230的博客
04-20 541
【代码】Vue3 简单的实现文字无限滚动。
vue公告栏文字上下滚动特效
洛一
07-14 3183
文字滚动
Vue3 无缝文字滚动详解及最佳实践
繁若华尘的博客
02-20 699
通过以上方案，可以实现高性能、跨平台兼容的无缝滚动效果。建议根据具体业务需求选择 CSS 动画或 JS 控制方案，关键要处理好内容复制、动画重置、性能优化三个核心环节。
vue项目中javascript实现通知公告的上下循环滚动播放
Serena_tz的博客
05-06 2281
vue项目中javascript实现通知公告的上下循环滚动播放。 infoList: [],//通知公告列表 timer: "",//播放定时器 speeds: 10, //滚动的速度,单位ms currentTop:0,//当前滚动上偏移量 pauseDuring:3000//通知公告的停顿时间
html 公告栏 上下滚动,vue实现公告栏文字上下滚动效果
06-02
可以使用 Vue.js 和 CSS3 实现一个简单的公告栏文字上下滚动效果。 首先，定义一个包含公告信息的数组： ``` <template> <div class="notice"> <ul> <li v-for="(item, index) in notices" :key="index"> {{ item }} </li> </ul> </div> </template> <script> export default { data() { return { notices: [ "公告1", "公告2", "公告3", "公告4", "公告5" ] }; } }; </script> ``` 然后，使用 CSS3 的动画效果，使公告文字实现上下滚动的效果： ``` .notice { height: 50px; overflow: hidden; } .notice ul { margin: 0; padding: 0; list-style: none; animation: scroll 10s linear infinite; } .notice li { height: 50px; line-height: 50px; } @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-250px); } } ``` 这里使用了 CSS3 的动画效果，通过 translateY() 方法实现公告文字的上下滚动。同时设置了 animation 属性，让动画在 10 秒内循环播放。 最后，你可以在你的 Vue 组件中调用这个组件，来实现公告栏文字上下滚动的效果： ``` <template> <div> <Notice /> </div> </template> <script> import Notice from "./Notice.vue"; export default { components: { Notice } }; </script> ``` 这样，你就可以在你的页面上添加一个公告栏，并且实现了文字的上下滚动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值