虚拟滚动器

VirtualScroller 是一种高效渲染大量数据的性能方法。

导入#


import { VirtualScroller } from 'primereact/virtualscroller';

基础#

VirtualScroller 需要 items 作为要显示的数据，itemSize 用于项目的大小，以及 itemTemplate 来定义每个项目的内容。视口的大小可以直接使用 scrollWidth、scrollHeight 属性配置，也可以使用 CSS width 和 height 样式配置。


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} 
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

水平#

将 orientation 设置为 horizontal 可以启用水平滚动。在这种情况下，itemSize 应指项目的宽度。


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} orientation="horizontal"
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

网格#

当 orientation 设置为 both 时，可以启用垂直和水平滚动。在此模式下，itemSize 应该是一个数组，其中第一个值是项目的高度，第二个值是项目的宽度。


<VirtualScroller items={items} itemSize={[50, 100]} itemTemplate={itemTemplate} orientation="both" 
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

延迟#

delay 属性在滚动期间添加一个以毫秒为单位的等待阈值，以进行渲染优化。

无延迟

150 毫秒

500 毫秒


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={150} />
<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={500} />

加载#

通过添加 showLoader 属性启用忙碌状态，该属性默认使用模态框阻塞 UI。或者，可以使用 loadingTemplate 来自定义项目，例如使用骨架屏。

模态框

骨架屏


<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

懒加载#

懒加载模式对于处理大型数据集非常方便，而不是加载整个数据，而是按需加载少量数据块。要实现懒加载，请启用 lazy 属性并实现 onLazyLoad 回调以返回数据。


<VirtualScroller items={lazyItems} itemSize={50} itemTemplate={itemTemplate} lazy onLazyLoad={onLazyLoad} 
    loadingTemplate={loadingTemplate} showLoader loading={lazyLoading} 
    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />

无障碍#

屏幕阅读器

VirtualScroller 使用语义列表元素来列出项目。不强制使用特定的角色，您仍然可以使用任何 aria 角色和属性，因为任何有效的属性都会传递到容器元素。列表元素也可以使用 listProps 属性进行自定义以实现无障碍。

键盘支持

组件不包含任何内置的交互式元素。