当前位置：首页 > VUE

vue实现滚动推送消息

2026-01-21 10:59:49VUE

vue实现滚动推送消息的方法

使用CSS动画实现滚动

通过CSS的animation和@keyframes实现无限滚动效果，适合简单的单行消息推送。

vue实现滚动推送消息

<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>

使用定时器动态更新数据

通过setInterval定时更新消息列表，结合v-for渲染实现多消息轮播。

vue实现滚动推送消息

data() {
  return {
    messages: ['消息1', '消息2', '消息3'],
    currentIndex: 0
  }
},
mounted() {
  setInterval(() => {
    this.currentIndex = (this.currentIndex + 1) % this.messages.length
  }, 3000)
}

第三方库vue-seamless-scroll

专为Vue设计的无缝滚动组件，支持复杂配置。

npm install vue-seamless-scroll

<template>
  <vue-seamless-scroll 
    :data="messages"
    class="scroll-wrap"
    :class-option="option"
  >
    <ul>
      <li v-for="(item, index) in messages" :key="index">{{ item }}</li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      messages: ['消息1', '消息2', '消息3'],
      option: {
        step: 0.5,
        limitMoveNum: 2,
        hoverStop: true
      }
    }
  }
}
</script>

使用Element UI的走马灯

适用于使用Element UI的项目，通过el-carousel实现垂直滚动。

<template>
  <el-carousel 
    direction="vertical" 
    :autoplay="true"
    height="40px"
    :interval="3000"
  >
    <el-carousel-item v-for="(item, index) in messages" :key="index">
      <div class="message-item">{{ item }}</div>
    </el-carousel-item>
  </el-carousel>
</template>