虚拟列表
Virtualized List
只渲染可见条目，减少长列表的页面节点。
窗口中的条目1–9 / 10000
只渲染可见窗口，支持滚动和键盘
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'virtual-list'
);
view.element.addEventListener('ui:range', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
已加载条目很多，实际渲染成为性能瓶颈。
什么时候不用
小列表不必增加尺寸测量与焦点管理的复杂度。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "窗口中的条目" |
items | null |
count | 10000 |
itemLabel | "条目" |
height | 180 |
rowHeight | 36 |
help | "只渲染可见窗口，支持滚动和键盘" |
事件
ui:range
INTERACTION NOTES
交互与可访问性
- 离屏节点卸载时不要丢失键盘焦点。
- 正确表达总数与位置，测试读屏和查找行为。
和相似组件的区别
虚拟化不是远程分页，也不自动获取更多数据。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Solid · 来源核验