vue3写一个数据滚动面板，有上下滚动键，且有滚动效果，循环滚动

在Vue 3中创建一个数据滚动面板，你可以使用`v-for`指令结合`<transition>`组件来实现动画效果，同时利用事件监听滚动事件来控制滚动方向。下面是一个基本的示例：

<template>
  <div class="scroll-panel">
    <transition name="slide-transition">
      <div v-for="(item, index) in items" :key="index"
           @mouseover="pauseScrolling"
           @mouseleave="resumeScrolling"
           @keydown.up="handleUpScroll"
           @keydown.down="handleDownScroll"
           :style="{ transform: `translateY(${item.scrollTop}px)` }">
        {{ item.content }}
      </div>
    </transition>
  </div>
</template>

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

const items = ref([]); // 假设items是一个包含滚动信息的对象数组

let isScrolling = false; // 标记是否正在滚动

// 模拟滚动数据
onMounted(() => {
  for (let i = 0; i < 10; i++) {
    items.value.push({ content: `内容 ${i + 1}`, scrollTop: 0 });
  }
});

function handleUpScroll() {
  if (!isScrolling) {
    isScrolling = true;
    scrollUp();
  }
}

function handleDownScroll() {
  if (!isScrolling) {
    isScrolling = true;
    scrollDown();
  }
}

function scrollUp() {
  const lastItem = items.value[items.value.length - 1];
  if (lastItem.scrollTop > 0) {
    lastItem.scrollTop -= 50; // 每次上滚的步长
    requestAnimationFrame(() => {
      if (lastItem.scrollTop > 0) {
        scrollUp(); // 递归处理直到停止
      } else {
        isScrolling = false;
      }
    });
  }
}

function scrollDown() {
  const firstItem = items.value[0];
  if (firstItem.scrollTop < firstItem.content.offsetHeight) {
    firstItem.scrollTop += 50; // 每次下滚的步长
    requestAnimationFrame(() => {
      if (firstItem.scrollTop < firstItem.content.offsetHeight) {
        scrollDown(); // 递归处理直到停止
      } else {
        isScrolling = false;
      }
    });
  }
}

function pauseScrolling() {
  isScrolling = false;
}

function resumeScrolling() {
  if (!isScrolling) {
    scrollDown(); // 初始状态从下往上开始滚动
  }
}

onUnmounted(() => {
  isScrolling = false;
});
</script>

<style scoped>
.slide-transition-enter-active,
.slide-transition-leave-active {
  transition: all 0.3s ease;
}
.slide-transition-enter,
.slide-transition-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}
</style>

在这个例子中，我们模拟了一个简单的滚动面板，当用户按下上/下箭头时，滚动相应的方向。`slide-transition`样式用于添加过渡效果。记得根据实际需求调整滚动步长、滚动结束条件等。