数据滚动器

DataScroller 组件通过滚动按需加载数据显示。

导入#


import { DataScroller } from 'primereact/datascroller';

基本用法#

DataScroller 组件通过滚动按需加载数据显示。

产品列表

没有可用选项


<DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />

内联模式#

DataScroller 可以在内联模式下监听自身的滚动事件，而不是文档的滚动事件。

向下滚动加载更多

没有可用选项


<DataScroller value={products} itemTemplate={itemTemplate} rows={5} inline scrollHeight="500px" header="Scroll Down to Load More" />

加载器#

可以使用自定义元素来加载数据，而不是滚动。

点击页脚的加载按钮以加载更多

没有可用选项


<DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />

可访问性#

屏幕阅读器

DataScroller 使用语义列表元素来列出项目。没有强制执行特定的角色，您仍然可以使用任何 aria 角色和属性，因为任何有效的属性都会传递给容器元素。也可以使用 listProps 属性自定义列表元素的可访问性。

键盘支持

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