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

本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码，供大家参考，具体内容如下

需求:

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

步骤:

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

代码:

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

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

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

引用并注册

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

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

          

            

              {{ item.city }}
            
          

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。