@rc-component/listy

_{Ant Design 生态的一部分。}

📜 支持虚拟滚动、分组与粘性组头的 React 列表组件。

English | 简体中文

## 亮点 | 方向 | 支持 | | --- | --- | | 定位 | 支持虚拟滚动、分组与粘性组头的 React 列表组件。 | | 包名 | `@rc-component/listy` | | 发布 | `@rc-component/np` / `rc-np` | ## 安装 ```bash npm install @rc-component/listy ``` ## 用法 ```tsx | pure 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 () => (

{item.name}

} /> ); ``` ## API | 名称 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `items` | 列表数据源。 | `T[]` | `[]` | | `rowKey` | 解析列表项唯一标识。 | `keyof T \| (item: T, index: number) => 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` | | `scrollWidth` | 内容实际宽度，仅在 `virtual` 开启时生效。设置后会展示横向滚动条。 | `number` | - | | `direction` | 布局方向，设为 `rtl` 时启用从右到左布局。 | `'ltr' \| 'rtl'` | `'ltr'` | | `onScroll` | 内部滚动容器滚动时触发。 | `React.UIEventHandler` | - | | `prefixCls` | 组件样式前缀。 | `string` | `rc-listy` | ### ListyRef | 方法 | 说明 | | --- | --- | | `scrollTo(config)` | 滚动到指定位置、列表项 key 或分组 key。 | ## 本地开发 ```bash npm install npm start npm test npm run lint npm run compile ``` 本地 dumi 站点默认运行在 `http://localhost:8000`. ## 发布 ```bash npm run prepublishOnly ``` 发布流程通过 `@rc-component/np` 提供的 `rc-np` 命令处理。 ## 许可证 @rc-component/listy 基于 [MIT](./LICENSE) 协议发布。