当前位置：首页 > VUE

vue如何实现滚动字幕

2026-01-21 12:27:46VUE

实现滚动字幕的方法

在Vue中实现滚动字幕可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画

通过CSS的@keyframes和transform属性实现字幕的横向滚动效果。

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

<script>
export default {
  data() {
    return {
      text: '这是一条滚动字幕，内容可以自定义。'
    }
  }
}
</script>

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

.scroll-text {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

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

使用JavaScript定时器

通过JavaScript的setInterval动态改变元素的left或transform属性实现滚动效果。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-text" ref="text">{{ text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一条滚动字幕，内容可以自定义。',
      position: 0
    }
  },
  mounted() {
    this.startScrolling()
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.position -= 1
        this.$refs.text.style.transform = `translateX(${this.position}px)`

        if (this.position < -this.$refs.text.offsetWidth) {
          this.position = this.$refs.container.offsetWidth
        }
      }, 20)
    }
  }
}
</script>

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

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

使用第三方库

可以借助现成的Vue组件库如vue-marquee快速实现滚动字幕效果。

安装：

npm install vue-marquee

使用：

<template>
  <vue-marquee :duration="5000">{{ text }}</vue-marquee>
</template>

<script>
import VueMarquee from 'vue-marquee'

export default {
  components: { VueMarquee },
  data() {
    return {
      text: '这是一条滚动字幕，内容可以自定义。'
    }
  }
}
</script>

双向无缝滚动

实现字幕无缝循环滚动的效果，当文字完全移出可视区域后重新开始。

<template>
  <div class="scroll-container">
    <div class="scroll-text" :style="{ transform: `translateX(${position}px)` }">
      {{ text }}{{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一条滚动字幕 ',
      position: 0
    }
  },
  mounted() {
    this.startScrolling()
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.position -= 1
        if (this.position < -this.$el.querySelector('.scroll-text').offsetWidth / 2) {
          this.position = 0
        }
      }, 20)
    }
  }
}
</script>

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

.scroll-text {
  display: inline-block;
}
</style>

以上方法可以根据具体需求选择使用，CSS动画实现简单但灵活性较低，JavaScript实现更可控，第三方库则提供了开箱即用的解决方案。

vue如何实现滚动字幕