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


Posted in Vue.js onNovember 23, 2021

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

需求:

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

步骤:

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

代码:

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

<template>
<!-- 跑马灯组件 -->
  <div class="marquee-wrap" ref="marquee-wrap">
    <div class="scroll" ref="scroll">
      <p class="marquee">{{text}}</p>
      <p class="copy" ref="copy"></p>
    </div>
    <p class="getWidth" ref="getWidth">{{text}}</p>
  </div>
</template>

<script>
export default {
  name: 'marquee',
  props: ['val'],
  data () {
    return {
      timer: null,
      text: ''
    }
  },
  created () {
    let timer = setTimeout(() => {
      this.move()
      clearTimeout(timer)
    }, 1000)
  },
  mounted () {
    for (let item of this.val) {
    this.text += item
    }
  },
  methods: {
    move () {
    let maxWidth = this.$refs['marquee-wrap'].clientWidth
    let width = this.$refs['getWidth'].scrollWidth
      if (width <= maxWidth) return
    let scroll = this.$refs['scroll']
    let copy = this.$refs['copy']
      copy.innerText = this.text
      let distance = 0 
      this.timer = setInterval(() => {
        distance -= 1
        if (-distance >= width) {
          distance = 16
        }
        scroll.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .marquee{
    margin-right: 0.16rem;
  }
  p {
    word-break:keep-all;
    white-space: nowrap;
    font-size: 0.28rem;
  }
  .scroll {
    display: flex;
  }
  .getWidth {
    word-break:keep-all;
    white-space:nowrap;
    position: absolute;
    opacity: 0;
    top: 0;
  }
</style>

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

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

引用并注册

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

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

<Marquee class="realData">
          <ul class="fa-scroll-cont">
            <li v-for="item in realData" :key="item.name">
              <span class="roll-text">{{ item.city }}</span>
            </li>
          </ul>
</Marquee>

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
Vue详细的入门笔记
May 10 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
详解Vue的列表渲染
Nov 20 #Vue.js
详解Vue slot插槽
Nov 20 #Vue.js
详解Vue router路由
Nov 20 #Vue.js
vue中 this.$set的使用详解
如何用vue实现网页截图你知道吗
Vue3中的Refs和Ref详情
Nov 11 #Vue.js
详细聊聊vue中组件的props属性
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP5+UTF8多文件上传类
2008/10/17 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
token 机制和实现方式
2020/12/15 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python实现二维数组输出为图片
2018/04/03 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
介绍信样本
2015/01/31 职场文书
企业文化学习心得体会
2016/01/21 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python