vue实现虚拟列表滚动

了解虚拟滚动之前，需要先知道几个概念性的知识：可视区域，列表区域，非可视区域。

• 可视区域：当前固定高度所能看见的区域，决定列表每次展示的数量。
• 列表区域：列表数据区域，决定总的高度。
• 非可视区域：列表数据区域减去可视区域后不可见的区域。

虚拟滚动（Virtual Scrolling）是一种优化大型列表渲染性能的技术，在Vue中也有对应的实现方式。虚拟滚动可以提高大量数据列表的性能和响应速度，减少页面的渲染开销。

虚拟滚动实现原理，其实就是根据当前可视区域的高度，去计算显示的数量，只渲染可视区域的数据，对不可视区域的数据不渲染，从而节省性能。每次滚动时，根据滚动的距离去计算当前可视区域应该展示的数据。

以下是使用vue-virtual-scroll-list库实现虚拟滚动的简单示例：

1、首先，通过npm安装vue-virtual-scroll-list：

npm install vue-virtual-scroll-list

2、在vue组件中引入vue-virtual-scroll-list库：

<template>
  <div>
    <virtual-list :size="100" :remain="25">
      <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div>
    </virtual-list>
  </div>
</template>
 
<script>
import VirtualList from 'vue-virtual-scroll-list';
 
export default {
  components: {
    VirtualList
  },
  data() {
    return {
      items: [] // 假设有大量数据
    };
  }
};
</script>
 
<style scoped>
.item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #666;
}
</style>

在上述示例中，VirtualList组件用于包裹需要渲染的大量数据列表，通过设置size属性来指定列表总的数据项数量，remain属性指定要渲染的可见区域内的数据项数量。然后，使用v-for指令遍历items数组，并在每个项上应用样式。

通过以上配置，vue-virtual-scroll-list库会根据滚动的位置动态渲染可见区域的数据项，只渲染在视图中可见的数据，而不是将所有数据项都渲染出来，从而提高性能。