使用vue3 实现数据列表滚动显示

在Vue3中实现数据列表滚动显示，可以结合`v-for`指令和响应式数据来实现。具体实现步骤如下：

1. 在Vue实例中定义一个数组`list`，用于存储数据列表。

const app = Vue.createApp({
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' }
      ]
    }
  }
})

2. 在模板中使用`v-for`指令遍历`list`数组，并使用`ref`指令给数据列表元素命名，以便后面在JavaScript中操作。

<template>
  <ul class="list" ref="list">
    <li class="item" v-for="item in list" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

3. 在Vue实例的`mounted`生命周期钩子中，获取数据列表元素和列表项元素的高度，并定义一个计数器变量`count`，初始值为0。使用`setInterval`函数每隔一段时间执行一次滚动操作。在滚动操作中，将数据列表向上移动一个列表项的高度，并将计数器变量`count`加1。如果`count`的值超过了列表项的个数，就将列表重置为初始状态。

const app = Vue.createApp({
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' }
      ]
    }
  },
  mounted() {
    const list = this.$refs.list;
    const itemHeight = list.querySelector('.item').offsetHeight;
    let count = 0;
    
    setInterval(() => {
      count++;
      list.style.transform = `translateY(-${count * itemHeight}px)`;
      if (count >= this.list.length) {
        count = 0;
        list.style.transform = 'none';
      }
    }, 2000); // 每隔2秒钟滚动一次
  }
})

完整代码示例：

<template>
  <ul class="list" ref="list">
    <li class="item" v-for="item in list" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script>
const app = Vue.createApp({
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' }
      ]
    }
  },
  mounted() {
    const list = this.$refs.list;
    const itemHeight = list.querySelector('.item').offsetHeight;
    let count = 0;
    
    setInterval(() => {
      count++;
      list.style.transform = `translateY(-${count * itemHeight}px)`;
      if (count >= this.list.length) {
        count = 0;
        list.style.transform = 'none';
      }
    }, 2000); // 每隔2秒钟滚动一次
  }
})

app.mount('#app');
</script>