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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
解析js如何获取css样式
2016/12/11 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
Python中函数的用法实例教程
2014/09/08 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python怎么对数字进行过滤
2020/07/05 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
高一学生评语大全
2014/04/25 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
公司离职证明样本
2014/09/13 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
师范生小学见习总结
2015/06/23 职场文书
户外拓展训练感想
2015/08/07 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server