vue-virtual-scroller 不固定高度

vue-virtual-scroller 是一个用于处理大量数据的 Vue 组件，它可以在列表中只渲染可见的部分，从而提高性能和减少内存占用。它适用于不固定高度的列表，例如聊天记录、新闻列表等。

使用 vue-virtual-scroller，你需要按照以下步骤进行配置和使用：

1. 安装 vue-virtual-scroller：

   npm install vue-virtual-scroller

2. 在你的 Vue 组件中引入 vue-virtual-scroller：

   import { RecycleScroller } from 'vue-virtual-scroller';
   import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

   export default {
     components: {
       RecycleScroller,
     },
     // ...
   }

3. 在模板中使用 RecycleScroller 组件来渲染列表：

   <template>
     <RecycleScroller :items="data" :item-size="getItemSize" v-slot="{ item }">
       <!-- 渲染每个列表项的内容 -->
       <div>{{ item }}</div>
     </RecycleScroller>
   </template>

4. 在 Vue 实例中定义数据和计算属性：

   export default {
     data() {
       return {
         data: [], // 存储列表数据
       };
     },
     computed: {
       getItemSize() {
         // 返回每个列表项的高度
         return (index) => {
           // 根据索引获取对应项的高度
           // 例如：return this.data[index].height;
         };
       },
     },
     // ...
   }

通过以上步骤，你可以使用 vue-virtual-scroller 来渲染不固定高度的列表，并且只渲染可见部分，从而提高性能和减少内存占用。