vue3 使用列表无缝滚动插件

Vue3 中使用列表无缝滚动插件通常是为了优化长列表的性能，提供平滑的滚动体验。一个常用的库是 "vue-infinite-loading" 或者 "vue-virtual-scroller"，它们通过虚拟化技术，只渲染当前可见的部分，当用户滚动到列表底部时动态加载更多数据。

以下是使用 "vue-virtual-scroller" 的简单步骤：

1. 安装插件：

   npm install vue-virtual-scroller

2. 在 Vue 组件中引入并配置：

<template>
  <div class="scroll-container">
    <v-virtual-scroller :items="items" :height="scrollHeight" @scroll-end="loadMore">
      <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    </v-virtual-scroller>
  </div>
</template>

<script>
import { VVirtualScroll } from 'vue-virtual-scroller';

export default {
  components: {
    VVirtualScroll,
  },
  data() {
    return {
      items: [], // 初始数据数组
      scrollHeight: window.innerHeight, // 滚动区域高度
      loading: false, // 加载状态标志
    };
  },
  methods: {
    loadMore() {
      if (!this.loading && this.items.length < MAX_ITEMS_TO_LOAD) {
        this.loading = true;
        // 在这里异步加载更多的数据，并在完成之后更新 items 数组
        this.$axios.get('/api/load-more-items').then(response => {
          this.items.push(...response.data);
          this.loading = false;
        });
      }
    },
  },
};
</script>