vue3 virtual列表组件

使用示例

<script setup>
import VirtualList from 'lk-virtual-list'
import { faker } from '@faker-js/faker';

const data = Array.from({length: 100}, (v, i) => {
  return {
    v: `第${i + 1}条数据, ${faker.lorem.sentences({ min: 5, max: 20 })}`,
    k: Math.random().toString(16).slice(2)
  }
})

</script>
<template>
  <div style="width: 70%; height: 90vh">
    <VirtualList style="max-height: 100%; height: 100%;" :data="data" :item-size="90" key="k" item-resizable>
      <template #default="{ item }">
        <div style="border: 1px solid red;">
          {{ item.v }}
        </div>
      </template>
    </VirtualList>
  </div>
</template>
<style scoped>

</style>

属性说明

| 属性 | 类型 | 说明 | | ------------- | ------- | --------------------- | | data | Array | 数据列表 | | itemSize | Number | 尺寸高度 (必填) | | itemResizable | Boolean | 动态尺寸 | | bufferRatio | Number | 缓冲比例 (默认0.5) | | keyField | String | 唯一key (默认为key) |