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 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 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
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php记录日志的实现代码
2011/08/08 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python列表对象实现原理详解
2019/07/01 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
车间组长岗位职责
2013/12/20 职场文书
农村婚礼主持词
2014/03/13 职场文书
青蓝工程实施方案
2014/03/27 职场文书
法制宣传月活动总结
2014/04/29 职场文书
开工仪式策划方案
2014/05/23 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers