欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-16 23:18:48
本文实例为大家分享了vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下需求:在vue项目的顶部,来实现文字左右滚动步骤:1、可以自己封装一个组件,也可以自己写,也可以复制以下代码2、...

本文实例为大家分享了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实现跑马灯样式文字横向滚动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。