<template>
  <div class="scroll-list">
    <transition-group name="list-transition" tag="div">
      <div v-for="(item, index) in items" :key="index" class="list-item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>
  
<script setup>
import { onMounted, reactive, ref } from 'vue';
const items = reactive(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'])
const currentIndex = ref(0)// 当前显示的索引
const scrollSpeed = ref(1000) // 滚动速度，单位为毫秒

const startAutoScroll = () => {
  setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % items.length; // 更新当前索引
  }, scrollSpeed.value);
}

onMounted(() => {
  startAutoScroll()
});
</script>
  
  <style scoped>
.list-transition-enter-active,
.list-transition-leave-active {
  transition: all 0.5s;
}

.list-transition-enter,
.list-transition-leave-to {
  opacity: 0;
  transform: translateY(-50px);
}

.scroll-list {
  height: 6.25rem; /* 设置滚动列表容器的高度 */
  overflow: hidden; /* 隐藏溢出部分 */
}

.list-item {
  height: 2.5rem; /* 每个列表项的高度 */
  line-height: 2.5rem; /* 垂直居中文本 */
}
</style>