用vue3写一个循环的公告滚动轮播

当然！下面是一个使用Vue 3编写的循环公告滚动轮播的示例代码：

<template>
  <div classannouncement">
    <div class="announcement-container">
      <ul ref="list" class="announcement-list">
        <li v-for="(item, index) in announcements" :key="index" class="announcement-item">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';

export default {
  name: 'Announcement',
  data() {
    return {
      announcements: [
        '公告1',
        '公告2',
        '公告3',
        '公告4',
        '公告5'
      ],
      interval: null,
      currentIndex: 0,
      scrollWidth: 0
    };
  },
  mounted() {
    onMounted(() => {
      this.scrollWidth = this.$refs.list.scrollWidth;
      this.startScroll();
    });
  },
  methods: {
    startScroll() {
      this.interval = setInterval(() => {
        if (this.currentIndex === this.announcements.length - 1) {
          this.$refs.list.style.transition = 'none';
          this.$refs.list.style.transform = `translateX(-${this.scrollWidth}px)`;
          setTimeout(() => {
            this.$refs.list.style.transition = 'transform 0.3s ease-in-out';
            this.$refs.list.style.transform = 'translateX(0)';
            this.currentIndex = 0;
          }, 10);
        } else {
          this.currentIndex++;
        }
      }, 3000);
    }
  },
  beforeUnmount() {
    clearInterval(this.interval);
  }
};
</script>

<style scoped>
.announcement {
  width: 100%;
  overflow: hidden;
}

.announcement-container {
  width: 100%;
  overflow: hidden;
}

.announcement-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.announcement-item {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 20px;
}

</style>

在这个示例中，我们使用了Vue的`ref`和`onMounted`函数来处理滚动逻辑。`announcements`数组中存储了公告内容，`currentIndex`表示当前显示的公告索引，`scrollWidth`存储了滚动容器的宽度。

在组件的`mounted`生命周期钩子中，我们获取了滚动容器的宽度，并调用`startScroll`函数开始滚动。

`startScroll`函数使用`setInterval`定时器来每隔一段时间更新当前公告索引。当滚动到最后一个公告时，我们使用CSS的`transition`和`transform`属性实现平滑的滚动效果。首先，我们将过渡效果设置为`none`，然后使用`transform`将公告列表向左偏移一个容器宽度的距离。接着，我们通过设置一个短暂的定时器来等待一小段时间，再将过渡效果和偏移重置为初始状态，并将当前索引设置为0，实现循环滚动。

最后，在组件的`beforeUnmount`生命周期钩子中清除了定时器，防止内存泄漏。

你可以根据需要自定义样式和公告内容。希望这个示例能满足你的需求！