@mrtujiawei/react-components

安装

使用 npm:

$ npm install @mrtujiawei/react-components

使用 yarn:

$ yarn add @mrtujiawei/react-components

使用 unpkg CDN:

注意: 使用 CDN 时，需要将React暴露到全局中

<!-- 开发环境 -->
<script src="https://unpkg.com/@mrtujiawei/react-components/dist/umd/index.js"></script>

<!-- 生产环境 -->
<script src="https://unpkg.com/@mrtujiawei/react-components/dist/umd/index.min.js"></script>

使用 jsdelivr CDN:

注意: 使用 CDN 时，需要将React暴露到全局中

<!-- 开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/@mrtujiawei/react-components/dist/umd/index.js"></script>

<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/@mrtujiawei/react-components/dist/umd/index.min.js"></script>

使用

List

虚拟滚动列表

基本使用

import { List } from '@mrtujiawei/react-components';
import type { ListProps } from '@mrtujiawei/react-components';

const BasicList = () => {
  const itemCount = 1000;
  const dataList: number[] = Array.from(
    { length: itemCount },
    (_, index) => index + Math.random()
  );
  const height = 500;

  const Item: ListProps<number>['children'] = (props) => (
    <div style={props.style}>
      {props.index == itemCount ? '加载中...' : dataList[props.index]}
    </div>
  );

  return (
    <List itemCount={itemCount} itemSize={50} height={height}>
      {Item}
    </List>
  );
};

上拉加载

import { useState } from 'react';
import { List } from '@mrtujiawei/react-components';
import type { ListProps } from '@mrtujiawei/react-components';

const ListDemo = () => {
  const [hasMore, _setHasMore] = useState(true);
  const [itemCount, setItemCount] = useState(0);
  const [winHeight] = useState(() => {
    return document.documentElement.clientHeight;
  });

  const loadMore = async (_start: number, _end: number) => {
    setItemCount((itemCount) => itemCount + 20);
  };

  const Item: ListProps<unknown>['children'] = (props) => (
    <div style={props.style}>
      {props.index == itemCount ? '加载中...' : props.index}
    </div>
  );

  return (
    <List
      itemCount={itemCount}
      itemSize={50}
      height={winHeight}
      hasMore={hasMore}
      loadMore={loadMore}
    >
      {Item}
    </List>
  );
};

Props

height: number

容器高度

width: string | number = 100%

容器宽度

itemSize: number

单个列表项的高度

itemCount: number

数据总数

overscanCount: number = 1

屏幕外显示的列表项数量;数量越大，性能消耗越大; 适当增加可以减少页面空白

children: ComponentType<ListChildComponentProps>

子节点

useIsScrolling: boolean = false

开启滚动监听

itemKey: (index: number, data: T) => string | number

元素的key: 默认使用 index 作为下标

itemData: T = null

传递给children的数据

initialScrollOffset: number = 0

初始滚动高度

loadMore: (startIndex: number, endIndex: number) => void | Promise = null

触发上拉记载的参数, startIndex 开始加载数据的下标
startIndex == endIndex 为 true

hasMore: boolean = false

是否能够继续加载

threshold: number = 15

滚动到最后15个的时候, 开始加载新的数据

触发条件:

1. 滚动
2. 初始列表项不能填满容器高度

限制:
如果loadMore执行结束时，列表已停止滚动 那么即使剩余的列表项少于 threshold 也不会再次触发下一次加载