列表上拉加载下拉刷新

上拉加载下拉刷新采用react-weui组件, 适用于微信浏览器环境（别的环境没测试）。

/* 上拉加载下拉刷新 */
import React, { useCallback } from "react";
import { useGetList } from "~/hooks";
import NoData from "~/components/noData";
// @ts-ignore
import { PullToRefresh, InfiniteLoader } from "react-weui";

import styles from "./index.module.less";

interface IProps {
  url?: string;
  itemContent?: any;
  noDataContent?: any;
}

const PageRefresh = ({
  url = "",
  itemContent = {} as any,
  noDataContent = {} as any,
}: IProps) => {
  // 获取数据列表(封装的获取请求)
  const { noData, noMore, list, fetchList } = useGetList([], url, {
    isMount: true,
  });
  const onRefresh = useCallback(() => fetchList(1), [fetchList]);
  return (
    <div className={styles.refresh}>
      {noData ? (
        <NoData {...noDataContent} />
      ) : (
        <PullToRefresh
          onRefresh={(resolve: any) => {
            onRefresh();
            setTimeout(() => {
              resolve();
            }, 1000);
          }}
        >
          <InfiniteLoader
            loaderDefaultIcon="没有更多了..."
            onLoadMore={(resolve: any, finish: any) => {
              if (noMore) {
                finish();
              } else {
                fetchList();
                finish();
              }
            }}
          >
            {list.map((item: any) => {
              return <div key={item.id}>{itemContent(item)}</div>;
            })}
          </InfiniteLoader>
        </PullToRefresh>
      )}
    </div>
  );
};
export default PageRefresh;

引用组件

import PageRefresh from "~/components/pageRefresh";
<PageRefresh
        url="/payInfo"
        itemContent={(item: any) => (
          <div
            key={item.id}
            className={styles.item}
            onClick={() =>
              history.push(xxx`)
            }
          >
            <Item item={item} />
          </div>
        )}
        noDataContent={{
          title: "暂无消费记录",
          img: require("~/images/customerConsumption_noData.png"),
          paddingTop: 350,
          width: 398,
          height: 270,
        }}
      />