VirtualList 虚拟滚动列表
虚拟滚动列表组件，用于高效展示大量数据，通过动态渲染可视区域内的元素来提升性能。
何时使用
- 需要展示大量数据时，避免一次性渲染所有数据导致性能问题。
- 列表项高度不固定，需要动态计算和优化渲染的场景。
- 需要支持无限滚动加载更多数据的场景。
代码演示
基础用法
动态加载更多
API
VirtualList
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 列表数据 | any[] | [] |
| uniqueKey | 数据项的唯一标识字段 | string | - |
| pageMode | 是否开启整页滚动模式 | boolean | false |
| visibleHeight | 可视区域高度 | number | - |
| pageModeVisibleSize | 整页滚动模式下显示的数据条数 | number | - |
| itemEstimatedHeight | 列表项预估高度 | number | 50 |
| renderItem | 渲染列表项的函数 | (item: any, index: number, list: any[]) => React.ReactNode | - |
| wrapperClass | 容器类名 | string | - |
| wrapperStyle | 容器样式 | React.CSSProperties | - |
| bufferSize | 缓冲区域大小 | number | - |
| onLoadMore | 加载更多数据的回调函数 | () => Promise<unknown> | - |
| hasMore | 是否还有更多数据 | boolean | false |
| renderLoadMore | 自定义渲染加载更多区域 | (loading: boolean, hasMore: boolean) => React.ReactNode | - |
| isShowLoadMore | 是否显示加载更多区域 | boolean | true |
| itemWrapperClass | 列表项容器类名 | string | - |
| topThreshold | 顶部阈值 | number | 0 |
| onScrollTop | 滚动到顶部的回调函数 | () => void | - |
| onScroll | 滚动事件回调函数 | (evt: Event) => void | - |
| presetOffset | 预设的滚动偏移量 | number | - |
注意事项
-
性能优化
- 组件内部实现了高效的虚拟滚动机制，只渲染可视区域内的元素
- 建议为每个列表项提供唯一的
uniqueKey，以提高渲染性能 - 如果列表项高度不固定，可以通过
itemEstimatedHeight提供一个预估值
-
滚动加载
- 通过
onLoadMore和hasMore配合实现无限滚动加载 - 可以使用
renderLoadMore自定义加载状态的展示 - 加载过程中会自动防止重复触发加载
- 通过
-
页面模式
- 开启
pageMode后，列表会以整页为单位进行渲染和加载 - 可以通过
pageModeVisibleSize控制每页显示的数据条数 - 页面模式下滚动事件会绑定到 document 上
- 开启
-
滚动控制
- 支持通过
presetOffset设置初始滚动位置 - 可以通过
onScrollTop监听列表滚动到顶部的事件 topThreshold用于控制触发滚动到顶部事件的阈值
- 支持通过