apex-virtual-list

一个虚拟列表组件 > > 支持 react 16.8+ 版本 > > 目前问题,如果每个子项高度不一样会出现显示错位的情况

Usage no npm install needed!

<script type="module">
  import apexVirtualList from 'https://cdn.skypack.dev/apex-virtual-list';
</script>

README

apex-virtual-list

一个虚拟列表组件

支持 react 16.8+ 版本

目前问题,如果每个子项高度不一样会出现显示错位的情况

Installation

npm install apex-virtual-list --save

Properties

Prop Default Type Description
showHeight 0 number 滚动组件显示的高度
data [] array 渲染的数组
itemHeight 0 number 子项的高度
buildItem ()=>{} 必须输入,构造每一个子项的函数

Use

import Virtual from 'apex-virtual-list';

export default function App() {
  return <Virtual 
    showHeight={330}
    data ={[...new Array(220).keys()]}
    itemHeight = {100}
    buildItem={(item)=>{
      return <p>{item}</p>
    }}
  />
}