当前位置：首页 > VUE

vue实现公告栏

2026-01-23 00:02:07VUE

Vue实现公告栏的几种方法

基于v-for循环渲染列表

使用v-for指令循环渲染公告列表数据，结合CSS实现滚动效果。数据通常存储在组件的data或Vuex中。

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

<script>
export default {
  data() {
    return {
      announcements: [
        { content: '公告1：系统维护通知' },
        { content: '公告2：新功能上线' },
        { content: '公告3：节假日安排' }
      ]
    }
  }
}
</script>

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

使用第三方组件库

Element UI或Ant Design Vue等库提供现成的公告栏组件。以Element UI为例：

<template>
  <el-alert
    v-for="(item, index) in notices"
    :key="index"
    :title="item.title"
    :type="item.type"
    :closable="false"
    show-icon>
    {{ item.content }}
  </el-alert>
</template>

实现上下滚动效果

通过setInterval动态修改数据实现无限循环滚动：

methods: {
  startScroll() {
    setInterval(() => {
      this.announcements.push(this.announcements.shift())
    }, 2000)
  }
},
mounted() {
  this.startScroll()
}

带关闭功能的公告栏

添加关闭状态管理和本地存储：

<template>
  <div v-if="!isClosed" class="announcement">
    <span>{{ message }}</span>
    <button @click="closeAnnouncement">×</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '重要公告内容',
      isClosed: localStorage.getItem('announcementClosed') === 'true'
    }
  },
  methods: {
    closeAnnouncement() {
      this.isClosed = true
      localStorage.setItem('announcementClosed', 'true')
    }
  }
}
</script>

注意事项

vue实现公告栏