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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
解决vue自定义组件@click点击失效问题
Apr 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php算法实例分享
2015/07/14 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python批量转换文件编码格式
2015/05/17 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python制作刷网页流量工具
2017/04/23 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
旷课检讨书2000字
2014/01/14 职场文书
党员干部承诺书范文
2014/03/25 职场文书
我的小天地教学反思
2014/04/30 职场文书
关于学习的演讲稿
2014/05/10 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
医院义诊活动总结
2014/07/04 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
万里长城导游词
2015/01/30 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
Python使用永中文档转换服务
2022/05/06 Python