vue3+ts实现数据的自动无缝滚动垂直

实现数据的自动无缝滚动垂直可以使用Vue.js和TypeScript来完成。以下是一个简单的实现方式：

1. 在Vue组件中，使用v-for指令渲染数据列表，并将列表存储在组件的data属性中。

2. 使用CSS实现滚动效果，例如设置容器元素的overflow属性为hidden，列表元素的高度为固定值，使用transform属性来实现滚动。

3. 使用Vue的生命周期钩子函数mounted，当组件挂载到DOM后，使用setInterval函数定时更新数据列表，并在更新后通过动画效果实现无缝滚动。

以下是示例代码：

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

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';

export default defineComponent({
  name: 'AutoScroll',
  setup() {
    const dataList = ref(['数据1', '数据2', '数据3', '数据4', '数据5']);
    const listHeight = 40; // 列表项高度
    const interval = 2000; // 更新数据间隔时间
    let timer: ReturnType<typeof setInterval> | null = null;

    // 更新数据列表
    const updateDataList = () => {
      dataList.value.push(dataList.value.shift());
    };

    // 开始滚动
    const startScroll = () => {
      timer = setInterval(() => {
        updateDataList();
      }, interval);
    };

    // 停止滚动
    const stopScroll = () => {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    };

    // 组件挂载后开始滚动
    onMounted(() => {
      startScroll();
    });

    // 组件卸载前停止滚动
    onUnmounted(() => {
      stopScroll();
    });

    return {
      dataList,
      listHeight,
    };
  },
});
</script>

<style scoped>
.scroll-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.scroll-list {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: scrollAnimation 5s linear infinite;
}
.scroll-list li {
  height: 40px;
  line-height: 40px;
}
@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200px);
  }
}
</style>

在上述代码中，我们使用了Vue的setup函数来定义组件的逻辑。在setup函数中，我们使用了ref函数来创建响应式数据dataList，表示数据列表。我们还定义了列表项的高度listHeight和更新数据间隔时间interval。在updateDataList函数中，我们通过数组的push和shift方法实现数据列表的更新。在startScroll函数中，我们使用setInterval函数来定时调用updateDataList函数，实现数据的自动更新。在onMounted钩子函数中，我们调用startScroll函数，实现组件的自动滚动。在onUnmounted钩子函数中，我们调用stopScroll函数，停止组件的自动滚动。最后，我们通过CSS动画实现了列表的无缝滚动效果。