当前位置：首页 > VUE

Vue实现滚动字幕

2026-02-20 07:25:37VUE

Vue 实现滚动字幕的方法

使用 CSS 动画实现

通过 CSS 的 @keyframes 和 transform 属性实现水平滚动效果，结合 Vue 的动态数据绑定。

<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>

使用 Vue 动态计算位置

通过 JavaScript 动态计算位移实现更灵活的控制，适合需要暂停或交互的场景。

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

<script>
export default {
  data() {
    return {
      text: "动态控制的滚动字幕",
      offset: 0,
      containerWidth: 0,
      textWidth: 0,
      animationId: null
    };
  },
  mounted() {
    this.initScroll();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    initScroll() {
      this.containerWidth = this.$refs.container.offsetWidth;
      const textElement = this.$refs.container.querySelector('.scroll-text');
      this.textWidth = textElement.offsetWidth;
      this.animateScroll();
    },
    animateScroll() {
      this.offset -= 1;
      if (this.offset < -this.textWidth) {
        this.offset = this.containerWidth;
      }
      this.animationId = requestAnimationFrame(this.animateScroll);
    }
  }
};
</script>

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

使用第三方库（如 vue-marquee）

对于复杂需求，可直接使用现成的 Vue 滚动组件库。

安装依赖：

npm install vue-marquee-text-component

示例代码：

<template>
  <marquee-text :duration="20" :repeat="3">
    {{ text }}
  </marquee-text>
</template>

<script>
import MarqueeText from 'vue-marquee-text-component';

export default {
  components: { MarqueeText },
  data() {
    return {
      text: "通过第三方库实现的平滑滚动效果"
    };
  }
};
</script>