一、前言
欢迎回到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 |
三、服务列表分页加载流程图
先通过流程图理清“初始加载→上拉加载→下拉刷新”的完整逻辑：
