Vue实现跑马灯样式文字横向滚动

 更新时间:2021-12-17 12:01:52   作者:佚名   我要评论(0)

本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下
需求:
在Vue项目的顶部,来实现文字左右滚动
步骤

本文实例为大家分享了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替代marquee标签超出宽度文字横向滚动效果

您可能感兴趣的文章:

相关文章

  • Vue实现跑马灯样式文字横向滚动

    Vue实现跑马灯样式文字横向滚动

    本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤
    2021-12-17
  • 详解jQuery的拷贝对象

    详解jQuery的拷贝对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
    2021-12-17
  • python安装pillow的三种方法

    python安装pillow的三种方法

    目录第一种方法第二种方法第三种方法安装pillow(python的图形界面库) 第一种方法 在Dos界面输入pip install pillow(但是不知为何总是失败);
    2021-12-17
  • fetch网络请求封装示例详解

    fetch网络请求封装示例详解

    export default ({ url, method = 'GET', data = null, }) => { // 请求配置 let options = { method } // data不为空
    2021-12-17
  • 利用js实现简单开关灯代码

    利用js实现简单开关灯代码

    body部分: <button>开关灯</button> script部分: <script> // window.onload 是窗口加载事件,可以实现将代码写到元素
    2021-12-17
  • 用vue实现注册页效果?vue实现短信验证码登录

    用vue实现注册页效果?vue实现短信验证码登录

    本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下 一、实现效果图 ?? 二、实现代码 1、实现头部 <template>
    2021-12-17
  • 三种方法解决ASP.NET?Core?6中的依赖项

    三种方法解决ASP.NET?Core?6中的依赖项

    依赖性注入是一种技术,它允许我们注入一个特定类的依赖对象,而不是直接创建这些实例。 使用依赖注入的好处显而易见,它通过放松模块间的耦
    2021-12-17
  • 解决父子组件通信的三种Vue插槽

    解决父子组件通信的三种Vue插槽

    目录前言环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽总结前言 插槽可以说是 Vue 中非常重要的一部分吧,在我学习和
    2021-12-17
  • JavaScript仿小米官网注册登录功能的实现

    JavaScript仿小米官网注册登录功能的实现

    目录首先我们需要搭建好页面布局JS功能1JS功能2JS功能3JS功能4效果图如下: 首先我们需要搭建好页面布局 html的代码如下: ? <div class=
    2021-12-17
  • vue实现手机验证码登录

    vue实现手机验证码登录

    本文实例为大家分享了vue实现手机验证码登录的具体代码,供大家参考,具体内容如下 验证码 <template> <div> <el-main> <el-f
    2021-12-17

最新评论