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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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来自动调用不同服务器上的flash
2006/10/09 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
jQuery实现增删改查
2020/12/22 jQuery
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python 命名规范知识点汇总
2020/02/14 Python
python实现图片横向和纵向拼接
2020/03/05 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
金融系毕业生自荐书
2014/07/08 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
付款委托书范本
2014/10/05 职场文书
离婚民事起诉状
2015/08/03 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏