--预存款部分页面完成

src/components/InfiniteScrollPaging/index.module.scss

@@ -0,0 +1,21 @@
+
+.scroll_main{
+    height: 100%;
+    .infinite_scroll{
+        font-size: $font_size_medium;
+        color: $color_font_two;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        .loading_more{
+            display: flex;
+            align-items: center;
+        }
+        .noMore{
+            padding-top: 20px;
+        }
+    }
+    .scrollViewCon {
+        // height: 100%;
+    }
+}

src/components/InfiniteScrollPaging/index.tsx

@@ -0,0 +1,124 @@
+
+import InfiniteScroll from "@/components/infiniteScroll"
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { dataLoadingStatus, getFilterData } from "@/common/util";
+import { isEmptyObject } from "@/common/common";
+
+interface Params{
+    children?: ReactNode,
+    query?: object,
+    fetchData: (data: object)=>any,
+    change?: (data: any)=>void
+}
+
+export default (props: Params)=>{
+	const { query={} } = props;
+  useEffect(()=>{
+    refreshDataRef.current = refreshData;
+    dataRef.current = data;
+    getData({moreStatus: true},{moreStatus: true});
+  }, [])
+	useEffect(()=>{
+		if(!isEmptyObject(query)){
+			setData({list: [],total: 0});
+			getData({moreStatus: true},{moreStatus: true});
+		}
+	},[query])
+  const getData = async (startStatus, endStatus)=>{
+    const tRefreshDataRef = refreshDataRef.current as any;
+    setRefreshData({
+      ...tRefreshDataRef,
+      ...startStatus,
+			loading: true
+    })
+    const result = await props.fetchData({
+			...query,
+      page: tRefreshDataRef.page,
+      size: tRefreshDataRef.size,
+    });
+    // 返回数据
+    props.change&&props.change(result);
+    if(result.success){
+      if(result.data.total<=0){
+        setRefreshData({
+          ...tRefreshDataRef,
+          ...endStatus,
+					loading: false
+        })
+      }else{
+        setData({
+          list: result.data.list,
+          // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
+          total: result.data.total
+        })
+        setRefreshData({
+          ...tRefreshDataRef,
+          refreshStatus: false,
+          moreStatus: false,
+					loading: false
+        })
+      }
+    }else{
+			setRefreshData({
+				...tRefreshDataRef,
+				refreshStatus: false,
+				moreStatus: true,
+				loading: false
+			})
+		}
+  }
+  // 加载刷新数据
+  const [refreshData, setRefreshData] = useState({
+    refreshStatus: false,
+    moreStatus: false,
+    page: 1,
+    size: 10,
+		loading: false
+  })
+  const refreshDataRef = useRef({});
+  // 渲染（数据）
+  const [data, setData] = useState({
+    list: [],
+    total: 0
+  });
+  const dataRef = useRef({});
+  // 下拉刷新
+  const handleRefresh = async ()=>{
+    let tRefreshData = refreshDataRef.current as any;
+    setRefreshData({
+      ...tRefreshData,
+      page: 1,
+      size: 10,
+    })
+    getData({refreshStatus: true,moreStatus: false},{refreshStatus: false,moreStatus: true});
+  }
+  // 加载更多
+  const handleMoreLoad = async ()=>{
+    let t = (dataRef.current as any);
+    let tRefreshData = refreshDataRef.current as any;
+    if(t.list.length<t.total){
+      setRefreshData({
+        ...tRefreshData,
+        page: ++tRefreshData.page,
+        size: ++tRefreshData.page*tRefreshData.size,
+      })
+      getData({
+        moreStatus: true
+      },{
+        moreStatus: true
+      });
+    }
+  }
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.loading})
+  }, [refreshData.loading])
+  
+
+  return (
+    <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} 
+    selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
+        {props.children}
+    </InfiniteScroll>
+  )
+}