1 分頁

1.1 url與分頁參數

查詢問卷列表接口，添加分頁參數：

• page：當前頁碼（第幾頁）
• pageSize：每頁多少條記錄

question.ts 查詢文件接口列表參數擴展，如下所示：

type SearchOption = {keyword: string;isStar: boolean;isDeleted: boolean;page: number;pageSize: number;
};

瀏覽器url獲取分頁參數，useLoadQuestionListData.ts代碼如下所示：

import { useSearchParams } from "react-router-dom";
import { useRequest } from "ahooks";
import { getQuestionListApi } from "@/api/question";import {LIST_SEARCH_PARAM_KEY,LIST_PAGE_PARAM_KEY,LIST_PAGE_SIZE_PARAM_KEY,LIST_PAGE_SIZE_DEFAULT,LIST_PAGE_DEFAULT,
} from "@/constant";type OptionType = {isStar: boolean;isDeleted: boolean;page: number;pageSize: number;
};/*** 獲取問卷列表* @returns 問卷列表*/
function useLoadQuestionListData(opt: Partial<OptionType>) {const { isStar, isDeleted } = opt;const [searchParams] = useSearchParams();const keyword = searchParams.get(LIST_SEARCH_PARAM_KEY) || "";const page =parseInt(searchParams.get(LIST_PAGE_PARAM_KEY) || "") || LIST_PAGE_DEFAULT ;const pageSize =parseInt(searchParams.get(LIST_PAGE_SIZE_PARAM_KEY) || "") ||LIST_PAGE_SIZE_DEFAULT;async function load() {const data = await getQuestionListApi({keyword,isStar,isDeleted,page,pageSize,});//...
}export default useLoadQuestionListData;

服務端解析分頁參數，question.js代碼如下：

const Mock = require('mockjs')const getQuestionList = require("./data/getQuestionList")const Random = Mock.Randommodule.exports = [// ...{// 獲取問卷列表url: '/api/question',method: 'get',response(ctx) {const { query = {} } = ctxconst isStar = query.isStar === 'true'const isDeleted = query.isDeleted === 'true'const page = parseInt(query.page) || 1const pageSize = parseInt(query.pageSize) || 10return {errno: 0,data: {list: getQuestionList({isStar, isDeleted, page, pageSize}),total: 100}}}},
]

---

1.2 分頁組件與url

antd分頁組件與url交互

由于多個列表頁面都需要分頁組件，這里我們以antd分頁組件為基礎，封裝自定義分頁組件，并且實現分頁參數與url參數交互，ListPage.tsx代碼如下所示：

import { FC, useEffect, useState } from "react";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { Pagination } from "antd";import {LIST_PAGE_DEFAULT,LIST_PAGE_PARAM_KEY,LIST_PAGE_SIZE_DEFAULT,LIST_PAGE_SIZE_PARAM_KEY,
} from "@/constant";type PropsType = {total: number;
};const ListPage: FC<PropsType> = (props: PropsType) => {const [current, setCurrent] = useState(LIST_PAGE_DEFAULT);const [pageSize, setPageSize] = useState(LIST_PAGE_SIZE_DEFAULT);const [searchParams] = useSearchParams();useEffect(() => {const curPage =parseInt(searchParams.get(LIST_PAGE_PARAM_KEY) || "") ||LIST_PAGE_DEFAULT;const curPageSize =parseInt(searchParams.get(LIST_PAGE_SIZE_PARAM_KEY) || "") ||LIST_PAGE_SIZE_DEFAULT;setCurrent(curPage);setPageSize(curPageSize);}, [searchParams]);const { total } = props;// 當page pageSize改變時，跳轉頁面（改變url）const nav = useNavigate();const { pathname } = useLocation();function handlePageChange(page: number, pageSize: number) {searchParams.set(LIST_PAGE_PARAM_KEY, page.toString());searchParams.set(LIST_PAGE_SIZE_PARAM_KEY, pageSize.toString());nav({pathname,search: searchParams.toString(),});}return (<Paginationcurrent={current}pageSize={pageSize}total={total}onChange={handlePageChange}/>);
};export default ListPage;

---

1.3 列表頁引用分頁組件

“星標問卷”列表頁Star.tsx代碼如下：

// ...
import ListPage from "@/components/ListPage";const List: FC = () => {// ...//問卷列表數據const { data = {}, loading } = useLoadQuestionListData({ isStar: true });const { list = [], total = 0 } = data;
// ...<div className={styles.footer}><ListPage total={total} /></div></>);
};export default List;

“回收站”列表頁Trash.tsx代碼如下所示：

import { FC, useState } from "react";
import { useTitle } from "ahooks";
import ListPage from "../../components/ListPage";const List: FC = () => {useTitle("調查問卷-回收站");//問卷列表數據const { data = {}, loading } = useLoadQuestionListData({ isDeleted: true });const { list = [], total = 0 } = data;
// ...<div className={styles.footer}><ListPage total={total} /></div></>);
};export default List;

2 加載更多

2.1 狀態

基礎

• page：當前頁
• list：全部數據列表，上劃累加
• total：總條數

計算項

• hasMoreData：是否有更多數據

---

2.2 觸發時機

• 頁面加載觸發
• 頁面滾動到加載更多數據時觸發
  • 監聽頁面滾動
  • 防抖處理
  • DOM計算頁面滾動刀”加載更多“

---

2.3 加載數據

• useRequest請求接口
• 接口返回數據，設置狀態

---

2.4優化

• 加載更多，緩存處理
• 刷新頁面優化暫無數據
• 搜索重置狀態

完整”我的問卷“頁List.tsx代碼如下所示：

import { FC, useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { useDebounceFn, useRequest, useTitle } from "ahooks";
import { Typography, Spin, Empty } from "antd";import QuestionCard from "@/components/QuestionCard";
import ListSearch from "@/components/ListSearch";
import styles from "./common.module.scss";
import { getQuestionListApi } from "@/api/question";
import { LIST_PAGE_SIZE_DEFAULT, LIST_SEARCH_PARAM_KEY } from "@/constant";const { Title } = Typography;const List: FC = () => {useTitle("調查問卷-我的問卷");//問卷列表數據const [started, setStarted] = useState(false);const [page, setPage] = useState(1);const [list, setList] = useState([]); // 全部列表數據，上劃加載更多，累計const [total, setTotal] = useState(0);const hasMoreData = total > list.length;const [searchParams] = useSearchParams();const keyword = searchParams.get(LIST_SEARCH_PARAM_KEY) || "";// 搜索重置狀態useEffect(() => {setStarted(false);setPage(1);setList([]);setTotal(0);}, [keyword]);// 加載數據const { run: loadData, loading } = useRequest(async () => {const data = await getQuestionListApi({page,pageSize: LIST_PAGE_SIZE_DEFAULT,keyword,});return data;},{manual: true,onSuccess(res) {const { list: newList = [], total = 0 } = res;// 累計數據setList(list.concat(newList));setTotal(total);setPage(page + 1);},});// 嘗試觸發加載-防抖處理const containerRef = useRef<HTMLDivElement>(null);const { run: tryLoadMore } = useDebounceFn(() => {const elem = containerRef.current;if (elem == null) {return;}// 判斷如果div bottom 小于等于頁面的高度const domRect = elem.getBoundingClientRect();if (domRect == null) {return;}const { bottom } = domRect;if (bottom <= document.body.clientHeight) {// 加載數據loadData();setStarted(true);}},{ wait: 500 });// 觸發時機：頁面加載或者url參數（keyword）變化時useEffect(() => {// 第一次加載，初始化tryLoadMore();}, [searchParams]);// 監聽頁面滾動事件useEffect(() => {if (hasMoreData) {window.addEventListener("scroll", tryLoadMore);}return () => {// 解綁事件window.removeEventListener("scroll", tryLoadMore);};}, [searchParams, hasMoreData]);// 加載更多顯示優化const LoadMoreContentElem = useMemo(() => {if (!started || loading) {return <Spin />;}if (total === 0) {return <Empty description="暫無數據" />;}if (!hasMoreData) {return <span>沒有更多了……</span>;}return <span>開始加載下一頁</span>;}, [started, loading, hasMoreData]);return (<><div className={styles.header}><div className={styles.left}><Title level={3}>我的問卷</Title></div><div className={styles.right}><ListSearch /></div></div><div className={styles.content}>{list.length > 0 &&list.map((q: any) => {const { _id } = q;return <QuestionCard key={_id} {...q} />;})}</div><div className={styles.footer}><div ref={containerRef}>{LoadMoreContentElem}</div></div></>);
};export default List;

結語

?QQ:806797785

??倉庫地址：https://gitee.com/gaogzhen

??倉庫地址：https://github.com/gaogzhen

[1]ahook官網[CP/OL].

[2]mock文檔[CP/OL].

[3]Ant Design官網[CP/OL].