vue3-virtual-scroll-component

极简vue3 虚拟滚动

install

npm install vue3-virtual-scroll-component

<template>
 <VirtualScroll :showNumber="20" :itemHeight="20" :list="list">
   <template v-slot="{item}">
       {{item}}
    </template>
  </VirtualScroll>
</template>

<script setup>
 const list =  Object.keys(new Array(10000).fill(''))
</script>

作用域插槽返回了1个字段： item 原始数据

Props 完整参数

参数名	类型	默认值	描述
list	Array	[]	列表数据
itemHeight	Number	10	每一行的高度，该字段为必填
showNumber	Number	10	一屏展示的数量
key	String	raw	每一行的唯一key，不传默认为原始类型 直接取值