公告竖向滚动 vue

在Vue.js中，创建一个公告栏的竖向滚动效果通常涉及到使用`v-for`指令遍历数据数组，并结合CSS样式和组件实现。以下是一个简单的示例：

首先，假设你有一个包含公告的数据列表：

data() {
  return {
    announcements: [
      { content: '公告1', date: '2023-04-01' },
      { content: '公告2', date: '2023-04-02' },
      // 更多公告...
    ]
  }
}

然后在模板文件里（如`components/Announcements.vue`），你可以这样展示：

<template>
  <div class="scrolling-announcements">
    <transition-group name="slide" tag="ul">
      <li v-for="(announcement, index) in announcements" :key="index">
        <p>{{ announcement.content }}</p>
        <span>{{ announcement.date }}</span>
      </li>
    </transition-group>
  </div>
</template>

<style scoped>
.scrolling-announcements {
  height: 200px; /* 配置滚动高度 */
  overflow-y: auto;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter,
.slide-leave-to {
  transform: translateY(100%);
}
</style>

这个例子中，我们使用了Vue的`transition-group`和自定义的动画名字`slide`，当公告添加或删除时，会平滑地向上或向下滚动。