ant-mobile分页组件封装

1.封装的分页组件

import React from 'react';
import { ListView, Icon, PullToRefresh } from "antd-mobile";
const PageComponent = (props) => {
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
    });
    const {
        list,//数据
        hasMore,//是否有更多
        refreshing,//是否在刷新中
        isLoading,//是否在加载状态
        pageNo,//页码
        pageSize,//每页条数
        myComponent,//调用父组件渲染组件方法
        setStatus,//修改hasMore,refreshing,isLoading方法
        setPageNo//修改页码
    } = props;

    //上拉加载
    const onEndReached = () => {
        // 加载中或没有数据了都不在加载
        if (isLoading || !hasMore) {
            return;
        }
        setStatus({ isLoading: true })
        setPageNo((pageNo) => pageNo + 1)
    };
    //下拉刷新
    const onRefresh = () => {
        if (pageNo === 1) {
            return;
        } else {
            setStatus({
                refreshing: true,
                isLoading: true,
            })
            setPageNo(1)
        }
    };

    return <div className='PageComponent'>
        {list && list.length ? (
            <ListView
                dataSource={ds.cloneWithRows(list)}
                renderRow={(rowData, id1, i) => myComponent(rowData, i)}
                initialListSize={pageSize}
                pageSize={pageSize}
                renderFooter={() => (
                    <div style={{ padding: 30, textAlign: "center" }}>
                        {isLoading ? <Icon type="loading" /> : "没有更多了"}
                    </div>
                )}
                onEndReached={() => onEndReached()}
                onEndReachedThreshold={20}
                useBodyScroll={true}
                pullToRefresh={
                    <PullToRefresh
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                    />
                }
            />
        ) : list && !list.length ? (
            <div className="noData">
                <p>暂无数据</p>
            </div>
        ) : null}
    </div>;
};

export default PageComponent;

调用

import React, { useState, useEffect, useMemo } from 'react';
import PageComponent from '../../public/pageComponent'
import { getPreRiskSurveysByLoginUser } from '@/api/riskApi'
import utils from "@/utils"
const TeamRisk = () => {
    const pageSize = 20;
    const [pageNo, setPageNo] = useState(1);
    const [list, setList] = useState([]);
    const [status, setStatus] = useState({
        hasMore: true,
        refreshing: true,
        isLoading: true,
    })
    // 获取数据
    useEffect(() => {
        let data = {
            requestObject: {
                riskSurveryStatus: "",
                pageNo: pageNo,
                pageSize: pageSize,
                riskSurveyType: "1"
            }
        }
        getPreRiskSurveysByLoginUser(data).then(res => {
            if (Number(pageNo) >= res.responseObject.totalPageCount) {
                setStatus({
                    ...status,
                    hasMore: false,
                    refreshing: false,
                    isLoading: false,
                });
                return false;
            }
            let arr = res.responseObject.columeValuesList;
            let newArr = [...list, ...arr];
            setList(newArr);
            setStatus({
                ...status,
                hasMore: true,
                refreshing: false,
                isLoading: false,
            });
        })
    }, [pageNo])

    // 渲染的子组件
    /**
     * 
     * @param {*} el 子组件调用父组件方法时传递的列表内的一条数据对象 
     * @returns 
     */
    const renderItem = (el) => {
        return <ul className="item">
            <li key={el.custeomrId}>
                <p>
                    <span>{el.custeomrName}</span>
                </p>
  
            </li>
        </ul>
    }
    // 父组件传递数据useMemo包裹
    const newObj = utils.deepClone(status);//对象的深拷贝
    const newList = useMemo(() => list, [list]);
    const staObj = useMemo(() => newObj, [newObj])
    const newPageNo = useMemo(() => pageNo, [pageNo]);
    const parent = {
        list: newList,
        pageNo: newPageNo,
        pageSize,
        ...staObj,
        setStatus,
        setPageNo
    }

    return <div className='TeamRisk'>
        <PageComponent {...parent} myComponent={(el) => renderItem(el)} />
    </div>;
};

export default TeamRisk;