当前位置：首页 > VUE

vue 实现文字滚动

2026-03-07 18:54:04VUE

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: 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 动态控制滚动

通过 JavaScript 动态计算位置并更新样式，可以实现更灵活的滚动效果。

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

<script>
export default {
  data() {
    return {
      text: '这是一段需要滚动的文字，可以根据需要调整内容和长度。',
      position: 0
    }
  },
  mounted() {
    this.startScroll()
  },
  methods: {
    startScroll() {
      const containerWidth = this.$refs.scrollContainer.offsetWidth
      const textWidth = this.$refs.scrollText.offsetWidth

      this.interval = setInterval(() => {
        this.position -= 1
        if (this.position < -textWidth) {
          this.position = containerWidth
        }
        this.$refs.scrollText.style.transform = `translateX(${this.position}px)`
      }, 20)
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

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

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

使用第三方库实现高级滚动效果

如果需要更复杂的滚动效果，可以使用第三方库如 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>

垂直滚动实现

修改 CSS 动画可以实现垂直滚动效果。

vue 实现文字滚动

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

<style>
.vertical-scroll-container {
  height: 100px;
  overflow: hidden;
}

.vertical-scroll-text {
  animation: verticalScroll 10s linear infinite;
}

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