怎么说呢，

Vue 3 + UniApp 下拉加载列表实战

为什么要写一个通用下拉加载组件？

• 重复代码堆积：每个页面都需要手动写分页、触底刷新、空数据占位等逻辑，耗时且容易出错。
• 难以维护：业务改动时需要在多个地方同步修改分页参数、接口调用方式，导致维护成本高。
• 性能与体验问题：手写触底事件往往会出现多次请求或漏请求，影响使用者体验。
• {style='color:#e53e41;' } 使用者痛点一：`uni-app`项目中经常出现“上拉到底没有提示”，导致使用者不知道还有无更多数据。
• {style='color:#e53e41;' } 使用者痛点二：`uni-load-more`在不同网站渲染差异大，往往需要额外样式调整。
• {style='color:#e53e41;' } 使用者痛点三：`vue‑composition-api` 的学习曲线让不少团队望而却步，没有统一封装可直接复用。

下面给出一个基于 Vue 3 Composition API 与 uni-app 的 Hook 封装方案。让你一次性搞定初始加载、搜索、分页、下拉加载、空数据占位等功能，并支持自定义 slot 渲染。

最终效果示例

只需把业务数据传进去就可以完成无限滚动功能，无需担心触底事件绑定或状态管理。按理说，

前言这方面，从零到一的思考过程

在实际开发中。我经常遇到同一个项目里重复出现相同的数据请求和渲染逻辑。怎么说呢，一次改接口就要改三处代码；一次业务需求变更就要改多处分页参数。于是我决定把这部分逻辑抽象成可复用的 Hook，并配合自定义组件实现更直观的数据展示方式。话说回来，

重复代码与维护成本高昂

• ① 手动绑定触底事件易漏掉或重复执行；
• ② 每次初始化都要手写 loading / noMore 状态判断；
• ③ 空数据占位图与文本也需要单独写；

上述问题不仅耽误开发效率，也极易导致页面间逻辑不一致。将这些共通逻辑提炼成 Hook 与组件后只需关注业务层即可明显提高开发效率和可维护性。

再看解决思路，Hook+Slot 封装

• useMoreList Hook：- 封装分页参数、请求函数、状态管理与触底监听；- 可配置是否自动加载、是否触底刷新等细节；- 返回统一 API，
• MoreList Component：- 提供统一样式与空数据占位；- 使用 `` 灵活展示业务 UI；其实，- 内置 `` 控制显示状态。
• 两者结合使用：- 在页面层调用 `useMoreList` 获取数据及方法。再通过 `` 包裹业务 UI，实现“一句话”无限滚动。
• 适配多端优雅展示：- 所有样式均为 SCSS，可根据网站做微调；- `uni-load-more` 支持 PC/Android/iOS 三端渲染一致性。

《代码实现》

MoreList.vue

 




暂无数据～