vue实现公告栏
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>注意事项
- 移动端适配需要考虑触摸事件和响应式布局
- 大量公告数据建议使用虚拟滚动优化性能
- 重要公告可添加置顶或特殊样式标识
- 动态数据建议通过API接口获取
以上方法可根据实际需求组合使用，例如同时实现自动滚动和手动关闭功能。对于复杂场景，可以考虑封装成可复用的公告栏组件。
