vue 公告滚动效果

Vue 中公告滚动效果通常是指在一个滚动区域（如轮播图、滚动列表或消息面板）展示动态更新的内容，比如系统通知或新闻。实现这种效果的一种常见做法是使用 Vue 的响应式特性结合 CSS 或动画库（如 Vuetify 的 `v-loading` 或 Vanilla JavaScript 的 `Intersection Observer API`）。步骤大致如下：

1. **创建组件**：定义一个公告组件，包含消息列表和滚动功能。

<template>
  <div class="scrolling-container">
    <ul ref="scrollList" v-for="announcement in announcements" :key="announcement.id">
      <!-- 每条公告的模板 -->
      <li>{{ announcement.content }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [],
      isScrolling: false,
      hasMore: true, // 初始状态表示还有更多内容
    };
  },
  methods: {
    loadMore() {
      if (this.hasMore) {
        this.$axios.get('api/announcements') // 使用 API 获取更多数据
          .then(response => {
            this.announcements.push(...response.data);
            this.isScrolling = true;
            setTimeout(() => { // 等待滚动完成后再停止
              this.isScrolling = false;
            }, 500); // 假设动画延迟500ms
          });
      }
    },
  },
};
</script>

2. **CSS样式**：添加 CSS 来实现滚动效果和加载提示。例如，可以设置滚动监听器并在滚动到容器底部时触发 `loadMore` 方法。

.scrolling-container {
  overflow-y: auto; /* 自动滚动 */
}

.load-more {
  display: none;
  position: fixed; bottom: 20px;
  width: 80%;
  text-align: center;
}

.is-scrolling & {
  display: block;
}