当前位置：首页 > VUE

vue实现文字自动滚动

2026-02-23 18:03:56VUE

Vue 实现文字自动滚动

方法一：使用 CSS 动画

通过 CSS 的 animation 和 @keyframes 实现文字自动滚动效果。

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

<script>
export default {
  data() {
    return {
      text: "这是一段需要自动滚动的文字，可以根据实际需求调整内容和长度。"
    };
  }
};
</script>

<style>
.scroll-container {
  width: 300px;
  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 定时器

通过 Vue 的 mounted 生命周期钩子和 JavaScript 的 setInterval 实现动态滚动效果。

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

<script>
export default {
  data() {
    return {
      text: "这是一段需要自动滚动的文字，可以根据实际需求调整内容和长度。",
      scrollSpeed: 1,
      scrollPosition: 0
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
        this.$refs.scrollText.style.transform = `translateX(${this.scrollPosition}px)`;

        if (Math.abs(this.scrollPosition) >= this.$refs.scrollText.offsetWidth) {
          this.scrollPosition = this.$refs.scrollContainer.offsetWidth;
        }
      }, 20);
    }
  }
};
</script>

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

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

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

如果需要更复杂的功能，可以使用第三方库如 vue-marquee。

安装依赖：

npm install vue-marquee-text-component

使用示例：

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

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

export default {
  components: {
    VueMarquee
  },
  data() {
    return {
      text: "这是一段需要自动滚动的文字，可以根据实际需求调整内容和长度。"
    };
  }
};
</script>