当前位置：首页 > VUE

vue实现提示文字滚动

2026-02-24 15:05:52VUE

实现文字滚动效果

在Vue中实现文字滚动效果可以通过CSS动画或JavaScript动态控制样式。以下是两种常见方法：

CSS动画方法

使用CSS的@keyframes和transform属性实现无缝滚动：

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

<script>
export default {
  data() {
    return {
      message: "这是一条需要滚动的提示文字，可以自定义内容..."
    }
  }
}
</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 ref="scrollContainer" class="js-scroll-container">
    <div ref="scrollText" class="js-scroll-text">{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "动态控制的滚动文字效果...",
      scrollPosition: 0
    }
  },
  mounted() {
    this.startScrolling()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame)
  },
  methods: {
    startScrolling() {
      const containerWidth = this.$refs.scrollContainer.offsetWidth
      const textWidth = this.$refs.scrollText.scrollWidth

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

      animate()
    }
  }
}
</script>

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

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

多行文字循环滚动

实现垂直方向的文字循环滚动：

<template>
  <div class="vertical-scroll">
    <div class="scroll-content" :style="{ transform: `translateY(${offset}px)` }">
      <div v-for="(item, index) in messages" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        "第一条消息",
        "第二条消息",
        "第三条消息"
      ],
      offset: 0,
      currentIndex: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.messages.length
      this.offset = -this.currentIndex * 30 // 假设每行高度为30px
    }, 2000)
  }
}
</script>

<style>
.vertical-scroll {
  height: 30px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  transition: transform 0.5s ease;
}

.scroll-content div {
  height: 30px;
  line-height: 30px;
}
</style>

使用第三方库

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

npm install vue-marquee

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

<script>
import MarqueeText from 'vue-marquee'

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

以上方法可根据实际需求选择，CSS动画适合简单效果，JavaScript实现更灵活，第三方库则提供更多预设功能。

vue实现提示文字滚动