vue3-virtual-list-comps

介绍

基于 vite4+vue3+TS 开发的无限滚动组件，可以实现加载 10 万条数据页面也不会卡顿,想了解实现思路,请阅读此文 开发自己的第一个 npm 包

用法

组件有 5 个配置参数

组件属性名	含义
data	列表数据
height	滚动容器的高度,单位 px
width	滚动容器的高度,单位 px
itemHeight	每个数据项盒子的高度,单位 px
itemCount	数据项的数量

<template>
  <FixedSizeList :data="data" :height="200" :width="50" :itemHeight="20" :itemCount="data.length">
    <template #listItem="{ itemData, index }">
      <div :class="index % 2 === 0 ? 'even' : 'odd'">{{ itemData }}</div>
    </template>
  </FixedSizeList>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { FixedSizeList } from 'vue3-virtual-list-comps';
  const data = ref([...new Array(101).keys()].slice(1, 101));
  // console.log(data.value.length);
</script>

<style scoped>
  .odd {
    background-color: aliceblue;
  }
  .even {
    background-color: lightgreen;
  }
</style>

效果演示

可以看到，无论如何滚动，可视区域最多渲染 14 条数据记录，不会引起页面的卡顿。

Math.ceil(props.height / props.itemHeight) + BUFF_OFFSET(顶部+底部)= 200/20 + 2+2 =14