当前位置：首页 > VUE

vue实现消息上下轮播

2026-02-24 18:34:24VUE

Vue实现消息上下轮播

使用CSS动画实现基础轮播

通过CSS的@keyframes和transform实现垂直滚动效果，结合Vue的动态数据绑定。定义消息列表数据，通过v-for渲染列表项，为容器添加固定高度和overflow: hidden。

<template>
  <div class="marquee-container">
    <div class="marquee-content" :style="{ animation: `scroll ${duration}s linear infinite` }">
      <div v-for="(item, index) in messages" :key="index" class="message-item">
        {{ item }}
      </div>
      <!-- 复制一份实现无缝衔接 -->
      <div v-for="(item, index) in messages" :key="index + 'copy'" class="message-item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: ['消息1', '消息2', '消息3', '消息4'],
      duration: 8 // 动画周期（秒）
    };
  }
};
</script>

<style>
.marquee-container {
  height: 100px;
  overflow: hidden;
}
.marquee-content {
  display: flex;
  flex-direction: column;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.message-item {
  padding: 10px;
}
</style>

动态数据更新处理

当消息列表发生变化时，需要重置动画以保证流畅性。通过监听数据变化，动态调整动画属性。

watch: {
  messages() {
    // 临时移除动画
    const content = this.$el.querySelector('.marquee-content');
    content.style.animation = 'none';
    // 强制重绘
    void content.offsetWidth;
    // 重新应用动画
    content.style.animation = `scroll ${this.duration}s linear infinite`;
  }
}

使用setInterval实现控制

通过JavaScript定时器手动控制滚动位置，适合需要精确暂停/继续的场景。利用Vue的ref获取DOM元素，计算滚动距离。

<template>
  <div class="manual-marquee" ref="container">
    <div class="content" ref="content">
      <div v-for="(msg, i) in messages" :key="i">{{ msg }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: ['动态消息A', '动态消息B'],
      scrollSpeed: 1,
      intervalId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      this.intervalId = setInterval(() => {
        this.$refs.container.scrollTop += this.scrollSpeed;
        if (this.$refs.container.scrollTop >= this.$refs.content.scrollHeight / 2) {
          this.$refs.container.scrollTop = 0;
        }
      }, 50);
    },
    pauseScroll() {
      clearInterval(this.intervalId);
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  }
};
</script>

第三方库实现（如vue-marquee）

对于复杂需求，可以使用专门库快速实现。安装vue-marquee-text-component后直接调用组件。

npm install vue-marquee-text-component

<template>
  <marquee-text :duration="5" :repeat="3" direction="up">
    <div v-for="(item, i) in items" :key="i">{{ item.text }}</div>
  </marquee-text>
</template>

<script>
import MarqueeText from 'vue-marquee-text-component';
export default {
  components: { MarqueeText },
  data() {
    return {
      items: [{ text: '轮播项1' }, { text: '轮播项2' }]
    };
  }
};
</script>

vue实现消息上下轮播