一、前言
歡迎回到mypet項目實戰！?? 今天我們實現商家服務管理核心功能——商家服務列表展示與上拉加載更多。商家成功注冊并通過審核后，可發布寵物服務項目（如洗澡、美容、醫療等），用戶通過服務列表瀏覽并預約。
本次實現的核心是**“分頁加載”**技術：后端使用MyBatis-Plus的Page對象實現分頁查詢，前端集成Mescroll-Uni組件實現上拉加載更多（類似電商APP的商品列表）。即使是零基礎，也能通過“復制代碼+注釋解析”掌握分頁邏輯與滾動加載的實現。
?? 學習目標：
- 掌握MP的
Page分頁查詢，實現按商家ID、服務狀態等條件的分頁數據返回； - 熟練使用
Mescroll-Uni組件，實現上拉加載更多、下拉刷新功能； - 理解“分頁參數傳遞”“數據追加”“加載狀態管理”等關鍵邏輯；
- 解決“數據重復加載”“無更多數據判斷”“下拉刷新重置”等實戰問題。
二、前置準備
開始編碼前，請確認以下內容已就緒：
| 項目 | 檢查內容 | 注意事項 |
|---|---|---|
| 數據庫表結構 | fuwuxiangmu（服務項目表）需包含以下字段：id（主鍵）、shangjia_id（關聯商家ID）、fuwumingcheng（服務名稱）、fuwujiage（服務價格）、fuwudescribe（服務描述）、zhuangtai（狀態：0-下架，1-上架）、addtime（添加時間） | 若表/字段缺失，執行建表SQL：sqlCREATE TABLE fuwuxiangmu (id BIGINT PRIMARY KEY AUTO_INCREMENT, shangjia_id BIGINT NOT NULL, fuwumingcheng VARCHAR(100) NOT NULL, fuwujiage DECIMAL(10,2) NOT NULL, zhuangtai TINYINT DEFAULT 1 COMMENT '0-下架，1-上架'); |
| 后端配置 | 1. 已配置MP分頁插件（MybatisPlusConfig中注冊PaginationInterceptor）；2. 商家已通過審核（shangjia表zhuangtai=1） | 若未配置分頁插件，需在MybatisPlusConfig中添加：@Bean public PaginationInterceptor paginationInterceptor() { return new PaginationInterceptor(); } |
| 前端組件 | 1. 已導入Mescroll-Uni組件（HBuilder X→插件市場搜索安裝）；2. pages.json配置路由："pages": [{"path": "pages/fuwuxiangmu/list","style": {"navigationBarTitleText": "我的服務列表"}}] | 確保Mescroll-Uni組件路徑正確（默認/components/mescroll-uni/mescroll-uni.vue） |
| 測試數據 | 往fuwuxiangmu表插入測試數據（關聯已通過審核的商家ID）：INSERT INTO fuwuxiangmu (shangjia_id, fuwumingcheng, fuwujiage, zhuangtai) VALUES (1, '寵物洗澡', 39.90, 1), (1, '毛發修剪', 69.90, 1); | 確保shangjia_id對應的數據在shangjia表中存在且zhuangtai=1 |
三、服務列表分頁加載流程圖
先通過流程圖理清“初始加載→上拉加載→下拉刷新”的完整邏輯：
