前端虚拟滚动列表 vue虚拟列表

在Vue中创建一个虚拟滚动列表，可以使用vue-virtual-scroll-list库。以下是一个简单的例子：

首先，安装vue-virtual-scroll-list：

npm install vue-virtual-scroll-list --save

然后，在Vue组件中使用它：

<template>
  <virtual-list :size="itemHeight" :remain="visibleItemCount">
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </virtual-list>
</template>
 
<script>
import VirtualList from 'vue-virtual-scroll-list'
 
export default {
  components: {
    'virtual-list': VirtualList
  },
  data() {
    return {
      itemHeight: 20,          // 每个列表项的高度
      visibleItemCount: 10,    // 可视区域内的列表项数量
      items: []                // 列表数据
    }
  },
  mounted() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      // 模拟数据获取
      this.items = new Array(1000).fill(null).map((_, index) => ({ id: index, text: `Item ${index}` }));
    }
  }
}
</script>

在这个例子中，itemHeight是每个列表项的固定高度，visibleItemCount是可见区域内的列表项数量。items数组包含了所有的列表数据。当组件被挂载后，fetchItems方法会被调用来模拟获取大量数据，并填充items数组。

vue-virtual-scroll-list会自动根据itemHeight和visibleItemCount来计算滚动容器的高度，并且只渲染当前可视区域内的列表项，从而提高了性能。