feat: list page cache

config/dev.js

@@ -3,8 +3,8 @@ module.exports = {
     NODE_ENV: '"development"',
   },
   defineConstants: {
-    // HOST: '"http://127.0.0.1:9087"',
-    HOST: '"http://192.168.89.147:9087"',
+    HOST: '"http://127.0.0.1:9087"',
+    // HOST: '"http://192.168.89.147:9087"',
     AD_IMAGE: '"https://h5.njyunzhi.com/images/citizen_banner.png"',
     DEFAULT_POS: '"116.3476917447715,31.409912844296578"', // 霍山县人民政府 gcj02
     VERSION: '"1.1.13-20230325"',

src/components/PowerList/index.jsx

@@ -3,19 +3,20 @@ import Taro from "@tarojs/taro";
 import { View } from "@tarojs/components";
 import { PowerScrollView } from "@antmjs/vantui";
 import useShow from "@/layouts/hooks/useShow";
+import useHide from "@/layouts/hooks/useHide";
+import { throttle } from "@/utils/tools";
 
 export default React.forwardRef((props, ref) => {
-  const { request, params, renderItem, onLoadingChange, onDataChange } = props;
+  const { sid, request, params, renderItem, onLoadingChange, onDataChange } = props;
 
   const pageSize = 5;
-  const pageNumRef = React.useRef(0);
+  const pageShowRef = React.useRef(false);
+  const inited = React.useRef(false);
   const [loading, setLoading] = React.useState(false);
   const [list, setList] = React.useState([]);
   const [finished, setFinished] = React.useState(true);
   const listRef = React.useRef([]);
-  const paramsRef = React.useRef();
   listRef.current = list;
-  paramsRef.current = params || {};
 
   const changeLoading = (val) => {
     setLoading(val);
@@ -24,17 +25,19 @@ export default React.forwardRef((props, ref) => {
     }
   };
 
-  const queryData = React.useCallback(
+  const queryData = React.useCallback(throttle(
     (options = {}) => {
       return new Promise((resolve, reject) => {
         changeLoading(true);
-        request({
+
+        const queryParams = {
           pageSize,
-          ...paramsRef.current,
           ...options,
-        })
+        }
+
+        request(queryParams)
           .then((res) => {
-            const { records, current, pages } = res;
+            const { records, current, total } = res;
 
             let dataset =
               current == 1
@@ -45,51 +48,79 @@ export default React.forwardRef((props, ref) => {
             }
             setList(dataset);
 
-            setFinished(current >= pages);
+            setFinished(dataset.length >= total);
             changeLoading(false);
             resolve();
+
+            // 写入缓存
+            Taro.setStorage({
+              key: `list-${sid}`,
+              data: JSON.stringify({
+                params: queryParams,
+              }),
+            })
+
           })
           .catch((err) => {
             changeLoading(false);
             reject(err);
           });
       });
-    },
+    }),
     []
   );
 
-  const refresh = React.useCallback(() => {
-    console.log(pageNumRef);
-    pageNumRef.current = 1;
-
-    queryData({ pageNum: pageNumRef.current });
-    console.log("refresh" + pageNumRef.current);
-  }, [queryData]);
+  const refresh = React.useCallback((options = {}) => {
+    queryData({ ...options, pageNum: 1 });
+  }, []);
 
   const onScrollToLower = React.useCallback(
-    (event = 0, isRefresh = false) => {
-      console.log("onScrollToLower" + pageNumRef.current);
-      pageNumRef.current += 1;
-      queryData({ pageNum: pageNumRef.current });
+    (page) => {
+      const currentPage = Math.ceil(page / pageSize);
+      queryData({ pageNum: currentPage + 1, ...(params || {}) });
     },
-    []
+    [params]
   );
 
   useShow(() => {
-    refresh();
+    pageShowRef.current = true;
+
+    const paramStr = Taro.getStorageSync(`list-${sid}`);
+    const finalParams = paramStr ? JSON.parse(paramStr).params : { ...params || {} };
+
+    // 如果已经加载多页数据
+    // 那么需要重新加载
+    if (finalParams.pageNum && finalParams.pageNum > 1) {
+      finalParams.pageSize = finalParams.pageNum * finalParams.pageSize;
+      finalParams.pageNum = 1;
+    }
+
+    refresh(finalParams);
   });
 
+  useHide(() => {
+    pageShowRef.current = false;
+  });
   
+  // 页面隐藏之后, 还会执行一次 useEffect
+  // 不知道是否是 Taro 的 bug
   React.useEffect(() => {
-    refresh();
-  }, [refresh, params]);
+    if (!inited.current) {
+      // 首次进入, 清理缓存
+      Taro.removeStorageSync(`list-${sid}`);
+      inited.current = true;
+    }
+
+    if (pageShowRef.current) {
+      refresh(params);
+    }
+  }, [params]);
 
   React.useImperativeHandle(ref, () => ({
-    refresh,
+    refresh: () => refresh(params),
     updateData: (dt) => setList(dt),
-  }));
+  }), [params]);
  
-
   return (
     <PowerScrollView
       scrollY

src/pages/apply/list/index.jsx

@@ -14,6 +14,9 @@ const tabStyle = {
   overflow: "hidden",
 };
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+const sid2 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
   const router = Taro.useRouter();
   const { title, applyType = "" } = router.params;
@@ -66,6 +69,7 @@ export default (props) => {
       <Tabs sticky>
         <Tab title="督查员" style={tabStyle}>
           <PowerList
+            sid={sid1}
             request={getTaIssueApply}
             params={{ applyType, sourceType: "inspector", duty, issueId }}
             renderItem={(item) => (
@@ -80,6 +84,7 @@ export default (props) => {
         </Tab>
         <Tab title="市民" style={tabStyle}>
           <PowerList
+            sid={sid2}
             request={getTaIssueApply}
             params={{ applyType, sourceType: "feedback", duty }}
             renderItem={(item) => (

src/pages/check/list/index.jsx

@@ -9,6 +9,8 @@ import { getTaCheck } from '@/services/tacheck';
 import Card from './components/Card';
 
 const queryParams = {isValid: true};
+const sid1 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
 
   const onClick = (typ, item) => {
@@ -26,6 +28,7 @@ export default (props) => {
   return (
     <Page roles={[ROLE_INSPECTOR]}>
       <PowerList
+        sid={sid1}
         request={getTaCheck}
         params={queryParams}
         renderItem={item => (

src/pages/check/loc/list/index.jsx

@@ -7,6 +7,8 @@ import PowerList from '@/components/PowerList';
 import { getTaCheckItem } from '@/services/tacheckitem';
 import { ROLE_INSPECTOR } from '@/utils/user';
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
 
   const router = Taro.useRouter();
@@ -38,6 +40,7 @@ export default (props) => {
   return (
     <Page loading={loading} roles={[ROLE_INSPECTOR]}>
       <PowerList
+        sid={sid1}
         request={getTaCheckItem}
         params={params}
         renderItem={item => {

src/pages/checkStand/list/index.jsx

@@ -7,6 +7,8 @@ import PowerList from "@/components/PowerList";
 import { getTaCheckStand } from "@/services/tacheckstand";
 import { ROLE_INSPECTOR } from "@/utils/user";
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
   const router = Taro.useRouter();
   const { checkId } = router.params;
@@ -40,6 +42,7 @@ export default (props) => {
   return (
     <Page tabBar="check" loading={loading}>
       <PowerList
+        sid={sid1}
         request={getTaCheckStand}
         params={params}
         renderItem={(item) => {

src/pages/feedback/issuelist/index.jsx

@@ -7,6 +7,8 @@ import Card from '@/components/IssueCard';
 import { getTaFeedback } from '@/services/tafeedback';
 import { getIssueStatus } from '@/utils/biz';
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
 
   const router = Taro.useRouter();
@@ -29,6 +31,7 @@ export default (props) => {
   return (
     <Page>
       <PowerList
+        sid={sid1}
         request={getTaFeedback}
         params={{bizStatus, isMine: true}}
         renderItem={(item) => (

src/pages/issue/list/index.jsx

@@ -15,6 +15,13 @@ const tabStyle = {
   overflow: 'hidden',
 }
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+const sid2 = Math.random().toString(36).substring(2, 8);
+const sid3 = Math.random().toString(36).substring(2, 8);
+const sid4 = Math.random().toString(36).substring(2, 8);
+const sid5 = Math.random().toString(36).substring(2, 8);
+const sid6 = Math.random().toString(36).substring(2, 8);
+
 // 只有督查员能看到当前页面
 export default (props) => {
   // const { user } = useModel('user');
@@ -41,6 +48,7 @@ export default (props) => {
         <Tab title="全部" style={tabStyle}>
           {active == 0 && (
             <PowerList
+              sid={sid1}
               request={getTaIssue}
               params={{ mine }}
               renderItem={(item) => (
@@ -52,6 +60,7 @@ export default (props) => {
         <Tab title="未交办" style={tabStyle}>
         {active == 1 && (
           <PowerList
+            sid={sid2}
             request={getTaIssue}
             params={{ mine, bizStatus: PROCESS_START }}
             renderItem={(item) => (
@@ -63,6 +72,7 @@ export default (props) => {
         <Tab title="已交办" style={tabStyle}>
           {active == 2 && (
           <PowerList
+            sid={sid3}
             request={getTaIssue}
             params={{ mine, bizStatus: PROCESS_ASSIGNED }}
             renderItem={(item) => (
@@ -74,6 +84,7 @@ export default (props) => {
         <Tab title="已办结" style={tabStyle}>
           {active == 3 && (
           <PowerList
+            sid={sid4}
             request={getTaIssue}
             params={{ mine, bizStatus: PROCESS_END }}
             renderItem={(item) => (
@@ -85,6 +96,7 @@ export default (props) => {
         <Tab title="已逾期" style={tabStyle}>
           {active == 4 && (
           <PowerList
+            sid={sid5}
             request={getTaIssue}
             params={{ mine, bizStatus: 'expired' }}
             renderItem={(item) => (
@@ -96,6 +108,7 @@ export default (props) => {
         <Tab title="已打回" style={tabStyle}>
           {active == 5 && (
           <PowerList
+            sid={sid6}
             request={getTaIssue}
             params={{ mine, bizStatus: 'reject' }}
             renderItem={(item) => (

src/pages/issue/list2/index.jsx

@@ -16,6 +16,9 @@ const tabStyle = {
   overflow: "hidden",
 };
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+const sid2 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
   const router = Taro.useRouter();
   const { title, bizStatus = "", mine = "" } = router.params;
@@ -51,6 +54,7 @@ export default (props) => {
       <Tabs sticky>
         <Tab title="督查员" style={tabStyle}>
           <PowerList
+            sid={sid1}
             request={getTaIssue}
             params={{ bizStatus, mine, sourceType: "inspector", issueId }}
             renderItem={(item) => (
@@ -64,6 +68,7 @@ export default (props) => {
         </Tab>
         <Tab title="市民" style={tabStyle}>
           <PowerList
+            sid={sid2}
             request={getTaIssue}
             params={{ bizStatus, mine, sourceType: "feedback" }}
             renderItem={(item) => (

src/pages/message/list/index.jsx

@@ -7,12 +7,16 @@ import { getTaMessage } from '@/services/tamessage';
 import { useModel } from '@/store';
 import Card from './components/Card';
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+// const sid2 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
   const { duty } = useModel('user');
   
   return (
     <Page>
       <PowerList
+        sid={sid1}
         request={getTaMessage}
         renderItem={(item) => (
           <Card key={item.msgId} item={item} duty={duty} />

src/pages/notice/index.jsx

@@ -4,6 +4,9 @@ import PowerList from '@/components/PowerList';
 import { getTaNotice } from '@/services/tanotice';
 import Card from './components/Card/index';
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+// const sid2 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
 
   const [loading, setLoading] = React.useState(false);
@@ -11,6 +14,7 @@ export default (props) => {
   return (
     <Page tabBar="notice">
       <PowerList
+        sid={sid1}
         request={getTaNotice}
         params={{status: 1}}
         renderItem={(item) => (

src/pages/org/issue/list/index.jsx

@@ -15,6 +15,9 @@ const tabStyle = {
   overflow: "hidden",
 };
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+const sid2 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
   const router = Taro.useRouter();
   const { title, bizStatus, color } = router.params;
@@ -55,6 +58,7 @@ export default (props) => {
       <Tabs sticky>
         <Tab title="督查员" style={tabStyle}>
           <PowerList
+            sid={sid1}
             request={getTaOrgIssue}
             params={{ bizStatus, sourceType: "inspector" ,issueId}}
             renderItem={(item) => (
@@ -70,6 +74,7 @@ export default (props) => {
         </Tab>
         <Tab title="市民" style={tabStyle}>
           <PowerList
+            sid={sid2}
             request={getTaOrgIssue}
             params={{ bizStatus, sourceType: "feedback" }}
             renderItem={(item) => (

src/pages/user/list/index.jsx

@@ -8,6 +8,9 @@ import PowerList from "@/components/PowerList";
 import { getSysUser, deleteSysUser } from "@/services/sysuser";
 import styles from "./index.module.less";
 
+const sid1 = Math.random().toString(36).substring(2, 8);
+// const sid2 = Math.random().toString(36).substring(2, 8);
+
 export default (props) => {
   const [loading, setLoading] = React.useState(false);
   const listRef = React.useRef();
@@ -52,6 +55,7 @@ export default (props) => {
       <view className={styles["user-warpper"]}>
         <view className={styles["user-warpper-list"]}>
           <PowerList
+            sid={sid1}
             ref={listRef}
             request={getSysUser}
             onLoadingChange={setLoading}

src/utils/tools.js

@@ -0,0 +1,19 @@
+
+// @fn 是对应请求数据
+// @ms 是用户多次触发事件的时间间隔 是一个毫秒数
+export function throttle(fn, ms = 800){
+  let flag = true
+
+  return (...args) => {
+    if(!flag) return;
+
+    flag = false;
+    
+    const t = setTimeout(()=>{
+      clearTimeout(t);
+      flag = true
+    }, ms);
+
+    return fn(...args);
+  }
+}