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

作者：羊村懒王 | 2024-06-10 21:44:11

踩

vue - 超详细实现文字上下滚动功能效果,类似网站公告文字循环翻滚、中将人员名单

前言

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

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

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

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

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

在这里插入图片描述

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

在项目 components 文件夹下，新建 rolling.vue 作为组件，请一键复制源码。

<template>
    1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/700483