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>属性
属性
类型