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设计一个日历表
Dec 03 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue+iview实现手机号分段输入框
Mar 25 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
Python fileinput模块使用介绍
2014/11/30 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
销售总监工作职责
2013/11/21 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
班长竞选演讲稿
2014/04/24 职场文书
村委会贫困证明范本
2014/09/17 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server