跳到正文
Linasan UI

VirtualList 虚拟列表

只渲染可见行的长列表 hook:行高不一、保持锚点、跟随新内容、恢复滚动位置。

已渲染 0 / 10,000 行

基于 TanStack Virtual。scroll: 'window' 跟随页面滚动;followOutput 在底部时跟随追加的行(聊天、日志);startAt: 'end' 从底部开始;takeSnapshot() + snapshot 恢复滚动位置。Combobox 和 DataGrid 都用它。

安装

pnpm dlx shadcn@latest add https://docs.linasan.cn/r/use-virtual-list.json

第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。

用法

import { useVirtualList } from '@/components/virtual/use-virtual-list';

const list = useVirtualList({ count, getKey: (i) => rows[i].id, estimateSize: () => 40 });
<div ref={list.scrollRef} className="h-80 overflow-y-auto">
  <div ref={list.listRef} style={list.listStyle}>
    {list.rows.map((r) => (
      <div key={r.key} ref={list.measureRef} data-index={r.index} style={list.itemStyle(r)}>…</div>
    ))}
  </div>
</div>

属性

属性

类型

本页目录