当前位置：首页 > VUE

vue实现公告滚动

2026-03-09 12:33:39VUE

Vue 实现公告滚动效果

公告滚动是常见的UI需求，可以通过Vue结合CSS动画或第三方库实现。以下是几种实现方式：

使用CSS动画实现垂直滚动

通过Vue数据绑定和CSS transform/animation 实现基础滚动效果：

<template>
  <div class="announcement-container">
    <div class="announcement-list" :style="{ transform: `translateY(${offset}px)` }">
      <div v-for="(item, index) in list" :key="index" class="announcement-item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: "公告1：系统维护通知" },
        { text: "公告2：新功能上线" },
        { text: "公告3：节日活动预告" }
      ],
      offset: 0,
      currentIndex: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.offset -= 30; // 每次移动距离
      this.currentIndex++;
      if (this.currentIndex > this.list.length - 1) {
        this.offset = 0;
        this.currentIndex = 0;
      }
    }, 2000); // 滚动间隔
  }
}
</script>

<style>
.announcement-container {
  height: 30px;
  overflow: hidden;
  position: relative;
}
.announcement-list {
  transition: transform 0.5s ease;
}
.announcement-item {
  height: 30px;
  line-height: 30px;
}
</style>

使用vue-seamless-scroll插件

专业级滚动方案，支持多种滚动模式和配置：

vue实现公告滚动

安装插件：

npm install vue-seamless-scroll

组件实现：

vue实现公告滚动

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

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      list: [
        { text: "紧急通知：服务器升级" },
        { text: "优惠活动：限时折扣" },
        { text: "版本更新：V2.0发布" }
      ]
    }
  },
  computed: {
    option() {
      return {
        direction: 1, // 0向下 1向上 2向左 3向右
        step: 0.5, // 步长
        limitMoveNum: 3, // 启动无缝滚动的数据量
        hoverStop: true, // 悬停暂停
        interval: 3000 // 滚动间隔
      }
    }
  }
}
</script>

<style>
.seamless-wrap {
  height: 30px;
  overflow: hidden;
}
</style>

使用CSS @keyframes动画

纯CSS方案，适合简单场景：

<template>
  <div class="scroll-box">
    <div class="scroll-content">
      <div v-for="(item, index) in list" :key="index">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<style>
.scroll-box {
  height: 30px;
  overflow: hidden;
  position: relative;
}
.scroll-content {
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
</style>

横向滚动实现

修改方向为水平滚动：

<template>
  <div class="horizontal-scroll">
    <div class="scroll-content" :style="{ transform: `translateX(${offset}px)` }">
      <span v-for="(item, index) in list" :key="index">{{ item.text }}&nbsp;&nbsp;</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      list: [/*...*/]
    }
  },
  mounted() {
    setInterval(() => {
      this.offset -= 2;
      if (Math.abs(this.offset) > this.$el.querySelector('.scroll-content').scrollWidth) {
        this.offset = 0;
      }
    }, 50);
  }
}
</script>

<style>
.horizontal-scroll {
  white-space: nowrap;
  overflow: hidden;
}
.scroll-content {
  display: inline-block;
  transition: transform 0.1s linear;
}
</style>

关键点总结：