当前位置：首页 > VUE

vue 实现跑马灯

2026-01-21 01:36:39VUE

Vue 实现跑马灯效果

跑马灯效果通常指文字或内容水平滚动循环展示。以下是两种常见的实现方式：

使用 CSS 动画

通过 CSS 的 animation 和 @keyframes 实现滚动效果：

<template>
  <div class="marquee-container">
    <div class="marquee-content">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这里是需要滚动的文字内容，可以自定义长度和内容'
    }
  }
}
</script>

<style>
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

使用 JavaScript 控制

通过定时器动态修改样式实现更灵活的控制：

<template>
  <div class="marquee-wrapper" ref="marquee">
    <div class="marquee-text" :style="{ transform: `translateX(${offset}px)` }">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '可自定义的滚动内容',
      offset: 0,
      timer: null,
      speed: 2
    }
  },
  mounted() {
    this.startMarquee()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    startMarquee() {
      const containerWidth = this.$refs.marquee.offsetWidth
      const textWidth = this.$refs.marquee.querySelector('.marquee-text').offsetWidth

      this.timer = setInterval(() => {
        this.offset -= this.speed
        if (this.offset < -textWidth) {
          this.offset = containerWidth
        }
      }, 20)
    }
  }
}
</script>

<style>
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 30px;
}

.marquee-text {
  position: absolute;
  white-space: nowrap;
}
</style>

双向滚动支持

添加方向控制参数实现左右滚动：

props: {
  direction: {
    type: String,
    default: 'left', // 'left' 或 'right'
    validator: value => ['left', 'right'].includes(value)
  }
},
methods: {
  startMarquee() {
    // ...
    this.timer = setInterval(() => {
      this.offset += this.direction === 'left' ? -this.speed : this.speed
      // ...
    }, 20)
  }
}

性能优化建议

对于频繁更新的动画，使用 requestAnimationFrame 替代 setInterval：

methods: {
  startMarquee() {
    const step = () => {
      this.offset -= this.speed
      if (this.offset < -textWidth) {
        this.offset = containerWidth
      }
      this.rafId = requestAnimationFrame(step)
    }
    this.rafId = requestAnimationFrame(step)
  },
  beforeDestroy() {
    cancelAnimationFrame(this.rafId)
  }
}

以上方法可根据实际需求调整速度、方向和内容。CSS 方案简单但灵活性有限，JavaScript 方案可控性更强但代码量稍多。

vue 实现跑马灯