亮点

| 方向 | 支持 | | --- | --- | | 定位 | 支持虚拟滚动、分组与粘性组头的 React 列表组件。 | | 包名 | @rc-component/listy | | 发布 | @rc-component/np / rc-np |

安装

npm install @rc-component/listy

用法

import Listy from '@rc-component/listy';
import '@rc-component/listy/assets/index.css';

const items = Array.from({ length: 100 }, (_, index) => ({ id: index, name: `Item ${index}` }));

export default () => (
  <Listy
    items={items}
    height={240}
    itemHeight={32}
    rowKey="id"
    itemRender={(item) => <div>{item.name}</div>}
  />
);

API

| 名称 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | items | 列表数据源。 | T[] | [] | | rowKey | 解析列表项唯一标识。 | keyof T \| (item: T) => React.Key | 必填 | | itemRender | 渲染每一项。 | (item: T, index: number) => React.ReactNode | 必填 | | height | 可视区域高度。 | number | - | | itemHeight | 预估项高度。 | number | - | | group | 分组配置。 | { key: (item: T) => K; title: (groupKey: K, items: T[]) => React.ReactNode } | - | | sticky | 启用粘性组头。 | boolean | false | | virtual | 启用虚拟滚动。 | boolean | true | | direction | 布局方向，设为 rtl 时启用从右到左布局。 | 'ltr' \| 'rtl' | 'ltr' | | onScroll | 内部滚动容器滚动时触发。 | React.UIEventHandler<HTMLElement> | - | | prefixCls | 组件样式前缀。 | string | rc-listy |

ListyRef

| 方法 | 说明 | | --- | --- | | scrollTo(config) | 滚动到指定位置、列表项 key 或分组 key。 |

本地开发

npm install
npm start
npm test
npm run lint
npm run compile

本地 dumi 站点默认运行在 http://localhost:8000.

发布

npm run prepublishOnly

发布流程通过 @rc-component/np 提供的 rc-np 命令处理。

许可证

@rc-component/listy 基于 MIT 协议发布。