当前位置：首页 > VUE

vue如何实现滚动字幕

2026-02-22 03:53:41VUE

实现滚动字幕的方法

在Vue中实现滚动字幕可以通过CSS动画或JavaScript动态控制样式来实现。以下是几种常见的方法：

使用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控制滚动

通过动态修改样式属性实现更灵活的控制，适合需要暂停或交互的场景。

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

<script>
export default {
  data() {
    return {
      text: "动态控制的滚动文字内容...",
      scrollPosition: 0,
      animationId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startScroll() {
      const containerWidth = this.$refs.container.offsetWidth;
      const textWidth = this.$refs.text.offsetWidth;

      const animate = () => {
        this.scrollPosition -= 1;
        if (this.scrollPosition < -textWidth) {
          this.scrollPosition = containerWidth;
        }
        this.$refs.text.style.transform = `translateX(${this.scrollPosition}px)`;
        this.animationId = requestAnimationFrame(animate);
      };

      animate();
    }
  }
};
</script>

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

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

使用第三方库

对于更复杂的效果，可以考虑使用专门的字幕滚动库如vue-marquee：

npm install vue-marquee

<template>
  <vue-marquee :text="text" :repeat="5" :duration="10" />
</template>

<script>
import VueMarquee from 'vue-marquee';

export default {
  components: {
    VueMarquee
  },
  data() {
    return {
      text: "使用vue-marquee实现的滚动文字效果..."
    };
  }
};
</script>

垂直滚动实现方法

要实现垂直方向的滚动字幕，可以调整动画方向：

vue如何实现滚动字幕

.scroll-container {
  height: 50px;
  overflow: hidden;
}

.scroll-text {
  animation: scrollVertical 5s linear infinite;
}

@keyframes scrollVertical {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}