【Uni-App+SSM 宠物项目实战】Day14：商家服务列表

一、前言

欢迎回到mypet项目实战！📋 今天我们实现商家服务管理核心功能——商家服务列表展示与上拉加载更多。商家成功注册并通过审核后，可发布宠物服务项目（如洗澡、美容、医疗等），用户通过服务列表浏览并预约。

本次实现的核心是**“分页加载”**技术：后端使用MyBatis-Plus的Page对象实现分页查询，前端集成Mescroll-Uni组件实现上拉加载更多（类似电商APP的商品列表）。即使是零基础，也能通过“复制代码+注释解析”掌握分页逻辑与滚动加载的实现。

📌 学习目标：

1. 掌握MP的Page分页查询，实现按商家ID、服务状态等条件的分页数据返回；
2. 熟练使用Mescroll-Uni组件，实现上拉加载更多、下拉刷新功能；
3. 理解“分页参数传递”“数据追加”“加载状态管理”等关键逻辑；
4. 解决“数据重复加载”“无更多数据判断”“下拉刷新重置”等实战问题。

二、前置准备

开始编码前，请确认以下内容已就绪：

项目	检查内容	注意事项
数据库表结构	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

三、服务列表分页加载流程图

先通过流程图理清“初始加载→上拉加载→下拉刷新”的完整逻辑：