Vue如何实现跑马灯样式文字横向滚动

这篇文章主要介绍Vue如何实现跑马灯样式文字横向滚动，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

需求:

在Vue项目的顶部,来实现文字左右滚动

步骤:

1、可以自己封装一个组件,也可以自己写,也可以复制以下代码
2、封装完成以后要在所需的组件中引入,注册,并使用

代码:

封装一个专门用来实现跑马灯效果的组件marquee组件

在哪个组件中使用,就引入

// 引入跑马灯组件import  marquee  from "@/components/marquee/marquee.vue";

引用并注册

export default {  components: {  // 注册跑马灯组件    marquee,  }, }

注册完成以后接下来就是Html样式了,在template模板中使用这个组件

          
            
              {{ item.city }}            
          

接下来就是效果图:
为了效果看的更明显多截了几张

以上是"Vue如何实现跑马灯样式文字横向滚动"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！