1.1.2 • Published 2 years ago

react-auto-scroll-list v1.1.2

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

react-auto-scroll-list

react 列表滚动组件,在时间间隔内进行列表的高亮突出,到底自动滚动。

功能

  1. 支持自动滚动,超出容器高度,自动滚动适配。
  2. 可自定义列表常规状态和高亮状态的样式。
  3. 支持自定义滚动的时间间隔。

安装

通过 npm

    npm install react-auto-scroll-list --save

通过 yarn

    yarn add react-auto-scroll-list

示例

示例demo

使用式例

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;

api 参数

参数说明类型默认值
className列表父容器 classNamestring-
renderItem列表渲染(item: T, index: number, isActive: boolean) => React. ReactElement;
keyExtractor列表 key(item: T, index: number) => stringindex
data列表数据源T[]-
timeInterval列表状态切换间隔number1000ms