MMFlatListRefresh 下拉加载更多与上拉刷新

Props

IFlatListRefreshProps

属性	类型	默认值	必传	说明
data	T[]		是	数据源
state	MMFlatListRefreshState		是	状态
noMore	boolean		是	没有更多
noMoreText	ReactNode		否	没有更多的文案
noMoreTextDelay	number		否	没有更多的文案延迟显示时间
empty	ReactNode		否	渲染空数据组件
renderFooter	ReactNode		否	渲染底部
height	number		否	容器高度
bottom	number		否	底部距离
disablePull	boolean	false	否	是否禁用下拉刷新
showScrollbar	boolean	true	否	是否显示滚动条
renderItem	(info: { item: T; index: number;}) => ReactNode		是	定义如何渲染每一行的组件

代码示例

import { FC, memo, useEffect, useState } from "react";
import { View, Text } from "@tarojs/components";
import MMNavigation from "../../components/navigation/index";
import { guid } from "@wmeimob/utils/src/guid";
import MMFlatListRefresh from "../../components/flat-list-refresh";
import useMMFlatList from "../../components/flat-list-refresh/useMMFlatList";
import MMEmpty from "../../components/empty";
import MMCell from "../../components/cell";
import MMButton from "../../components/button";

const Component: FC<{}> = (props) => {
  const [emptyData, setEmptyData] = useState(false);

  const [info, pullToRefresh] = useMMFlatList({
    initRequest: false,
    params: { pageSize: 100 }, // 充当全量，若业务场景会超过该数值，可改大
    getData: (pa) => {
      return new Promise<any>((resolve) => {
        setTimeout(() => {
          resolve({
            data: {
              isLastPage: emptyData ? true : pa.pageNum === 2,
              // list: []
              list: emptyData
                ? []
                : [...Array.from({ length: 20 })].map((item) => ({
                    id: guid(),
                  })),
            },
          });
        }, 1000);
      });
    },
  });

  useEffect(() => {
    pullToRefresh.onRefresh();
  }, [emptyData]);

  return (
    <View>
      <MMNavigation title="MMPullToRefresh" />

      <MMFlatListRefresh
        {...pullToRefresh}
        empty={
          <MMEmpty
            onClick={() => setEmptyData(false)}
            text="没有数据(点我恢复)"
          />
        }
        renderItem={({ item, index }) => {
          return (
            <MMCell title={item.id.slice(0, 25)} size="large">
              {index === 0 && (
                <MMButton
                  size="small"
                  onClick={() => {
                    setEmptyData(true);
                  }}
                  text="点击无数据"
                />
              )}
            </MMCell>
          );
        }}
        renderFooter={
          <View>
            <MMButton text="renderFooter" />
          </View>
        }
      />
    </View>
  );
};

const MMFlatListsRefreshPage = memo(Component);
export default MMFlatListsRefreshPage;