react 列表滚动组件,在时间间隔内进行列表的高亮突出,到底自动滚动。
- 支持自动滚动,超出容器高度,自动滚动适配。
- 可自定义列表常规状态和高亮状态的样式。
- 支持自定义滚动的时间间隔。
通过 npm
npm install react-auto-scroll-list --save
通过 yarn
yarn add react-auto-scroll-list
使用式例
import classnames from "classnames"; import ReactAutoScrollList from "react-auto-scroll-list"; import mockData from "./mockData"; import styles from "./App.module.less"; function App() { return ( <ReactAutoScrollList<{ label: string; value: number }> className={styles.container} renderItem={(item, index, active) => { const classNames = classnames( styles.listItem, active ? styles.active : styles.normal ); return <div className={classNames}>{item.label}</div>; }} keyExtractor={(item, index) => `${index}`} data={mockData} timeInterval={1000} /> ); } export default App;
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 列表父容器 className | string | - |
| renderItem | 列表渲染 | (item: T, index: number, isActive: boolean) => React. ReactElement; | |
| keyExtractor | 列表 key | (item: T, index: number) => string | index |
| data | 列表数据源 | T[] | - |
| timeInterval | 列表状态切换间隔 | number | 1000ms |