当前位置：首页 > VUE

vue实现单行消息滚动

2026-02-20 16:08:57VUE

实现单行消息滚动的方法

使用CSS动画实现滚动

通过CSS的@keyframes和transform属性可以实现平滑的滚动效果。将消息内容包裹在一个容器中，设置动画使其从右向左移动。

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

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

.scroll-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

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

使用JavaScript控制滚动

通过动态计算消息内容的宽度和容器宽度，使用requestAnimationFrame实现更灵活的滚动控制。

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

<script>
export default {
  data() {
    return {
      message: "这是一条需要滚动的消息",
      position: 0,
      animationId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startScroll() {
      const containerWidth = this.$refs.container.offsetWidth;
      const contentWidth = this.$refs.content.offsetWidth;

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

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

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

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

使用第三方库

如果需要更复杂的效果，可以考虑使用第三方库如vue-marquee或vue-awesome-marquee。

npm install vue-marquee

<template>
  <vue-marquee :duration="5000">{{ message }}</vue-marquee>
</template>

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

export default {
  components: { VueMarquee },
  data() {
    return {
      message: "这是一条需要滚动的消息"
    };
  }
};
</script>