vue-virtual-scroller 使用教程

Vue-Virtual-Scroller 是一款在 Vue.js 中使用的虚拟滚动组件，帮助你处理大量数据列表而无需一次性加载所有数据，从而提高性能。以下是基本的使用教程：

1. 安装和引入：

   npm install vue-virtual-scroller

然后在你的 `main.js` 或者需要使用的地方导入：

   import VirtualScroll from 'vue-virtual-scroller'
   import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
   Vue.component('virtual-scroll', VirtualScroll);

2. 配置组件：
创建一个新的 Vue 组件，并应用 `virtual-scroll` 组件。例如：

   <template>
     <div>
       <virtual-scroll :items="largeList" :item-height="200" :max-height="viewportHeight">
         <!-- 渲染每个 item 的模板 -->
         <div v-for="item in $scrollItems" :key="item.id">{{ item.content }}</div>
       </virtual-scroll>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         largeList: [], // 你需要滚动的大型数据数组
         viewportHeight: window.innerHeight, // 视口高度
         itemHeight: 200, // 单个 item 的高度
       };
     }
   }
   </script>

3. 更新列表：
当数据源更新时，你需要同步更新 `largeList`。例如，你可以添加一个方法来异步获取更多的数据：

   methods: {
     loadMoreData() {
       this.$axios.get('/api/more-data').then(response => {
         this.largeList = [...this.largeList, ...response.data];
         // 刷新滚动条
         this.$refs.virtualScroll.scrollTo({ top: Infinity });
       });
     },
   },
   mounted() {
     this.loadMoreData(); // 初始化加载一部分数据
   },
   // 可能会添加 scroll 事件监听器，如 onScrollEnd 或者 scrollUpdated
   // ...