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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue实现登陆页面开发实践
May 30 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中for循环控制语句用法实例
2015/06/02 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
司仪主持词两篇
2014/03/22 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
个人年终总结范文
2015/03/09 职场文书
紧急迫降观后感
2015/06/15 职场文书
公司仓库管理制度
2015/08/04 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python