MintUI是饿了么团队推出的一款基于Vue的移动端组件库，虽然现在已经不再积极维护，但在大量老项目中依然被广泛使用。其中mt-loadmore组件提供的下拉刷新和上拉加载功能，是列表页最常见的交互需求。不少开发者第一次用这个组件时都会遇到各种奇怪的问题，比如明明配置了方法却触发不了、刷新后列表不回弹、上拉到底没反应等。这篇文章就把mt-loadmore的用法和常见问题一次性讲透。
一、mt-loadmore组件的基本用法
先看一个最基础的使用示例。mt-loadmore组件分为三个区域：顶部下拉区域、正常内容区域、底部上拉区域，分别通过三个slot来定义。
顶部下拉区域使用名为top的slot，通常放一个加载动画；底部上拉区域使用名为bottom的slot，通常放加载提示文字。中间的默认slot就是你的列表内容。组件需要绑定两个核心方法：top-method对应下拉刷新触发的方法，bottom-method对应上拉加载触发的方法。
一个典型的写法如下：外层用mt-loadmore包裹列表，通过v-for渲染数据，top-method绑定loadTop方法，在loadTop里重新请求第一页数据，请求完成后必须调用this.$refs.loadmore.onTopLoaded()让组件回弹复位；bottom-method绑定loadBottom方法，请求下一页数据后调用this.$refs.loadmore.onBottomLoaded()结束加载状态。
二、核心属性和事件详解
理解组件的各个属性配置，是解决问题的关键。下面把常用属性整理成表格方便查阅。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| maxDistance | Number | 0 | 下拉的最大距离，0表示不限制 |
| autoFill | Boolean | true | 是否自动检测内容是否填满容器，未填满自动触发上拉加载 |
| distanceIndex | Number | 2 | 手指移动距离与下拉距离的比例 |
| topPullText | String | 下拉刷新 | 顶部按住未到达阈值时显示的文字 |
| topDropText | String | 释放更新 | 顶部下拉超过阈值时显示的文字 |
| topLoadingText | String | 加载中... | 顶部加载时显示的文字 |
| topDistance | Number | 70 | 触发下拉刷新的下拉距离阈值，单位像素 |
| bottomDistance | Number | 70 | 触发上拉加载的距离阈值 |
| bottomAllLoaded | Boolean | false | 为true时底部不再触发上拉加载 |
其中最需要重点关注的是autoFill和bottomAllLoaded这两个。autoFill默认为true，当列表内容不足以撑满容器时，组件会自动调用bottom-method去加载更多，直到填满或bottomAllLoaded变为true为止。如果你的首页数据请求有一次就全部返回了，记得及时把bottomAllLoaded设为true，否则可能出现重复请求的问题。
bottomAllLoaded则用于标记数据是否全部加载完成。当后端返回的列表条数小于每页请求数量，或者当前页已经是最后一页时，就应该把这个值设为true，底部会显示bottom-method对应的结束提示（如果配置了slots的话），并且不再触发上拉加载。
三、下拉刷新的典型流程和注意事项
下拉刷新的标准流程是：用户下拉到达阈值松手，组件显示加载状态并调用top-method，在这个方法里重新请求第一页数据，清空旧列表、替换新数据，最后必须调用this.$refs.loadmore.onTopLoaded()，组件才会收起顶部加载提示并回弹。
最容易犯的错误就是忘记调用onTopLoaded。很多人请求完数据后直接赋值，结果顶部的加载动画一直转个不停，页面卡在那里。同样的道理，上拉加载完成后忘记调用onBottomLoaded，底部也会一直保持加载状态，后续的上拉操作全部失效。这两个方法一定要放在请求回调的最后，哪怕是请求失败，也要在catch或finally里调用，否则组件状态就乱了。
另一个常见问题是下拉刷新时旧数据的处理。推荐的做法是请求成功后直接用新数组整体替换，而不是先清空再push。这样做不仅代码简洁，还能避免Vue响应式系统在某些情况下没有正确检测到数组变化的边缘情况。
四、上拉加载的常见问题排查
上拉加载的问题比下拉刷新更多一些，这里挑几个最典型的来说。
第一个问题是上拉加载触发不了。先检查容器高度：mt-loadmore依赖页面滚动，如果外层容器设置了overflow:hidden或者固定高度导致无法滚动，上拉动作就无从触发。其次检查数据是否已经全部加载，bottomAllLoaded是不是被误设成了true。还有一种情况是autoFill的问题，如果内容本来就没填满容器，滚动事件不会触发，此时要么依赖autoFill自动加载，要么主动先请求一页数据。
第二个问题是上拉到底后底部提示不显示。mt-loadmore的底部提示文字需要你在bottom这个slot里自己写，如果没写slot，默认是不会显示任何提示的。需要注意的是，当数据加载完毕时，很多开发者会动态修改bottom slot里的文字为“没有更多了”，这没问题，但要保证bottomAllLoaded同步设为true，否则用户还能继续上拉触发空请求。
第三个问题是上拉加载重复触发。如果请求较慢，用户连续上拉，可能出现同一页数据被请求多次的情况。解决办法是加一个loading标志位，进入方法时判断，如果正在加载就直接return，请求结束后复位。同时建议在数据拼接时做去重处理，双重保险。
五、与后端分页配合的完整示例思路
实际项目中，上拉加载一定要和后端分页接口配合好。data里维护pageNo和pageSize，下拉刷新时把pageNo重置为1并清空bottomAllLoaded，请求成功后替换数据；上拉加载时pageNo加1去请求，成功后concat拼接数据，当返回条数小于pageSize时设置bottomAllLoaded为true。
分页还有一个经典坑：下拉刷新时忘记把bottomAllLoaded重置为false。用户之前浏览到了最后一页，bottomAllLoaded已经是true，刷新后又加载不出更多数据了，只能下拉一次刷新，体验非常差。所以每次下拉刷新成功后，一定要记得执行this.allLoaded = false。
另外，如果列表接口有筛选条件或搜索关键词，切换条件时等价于一次全新的查询，处理逻辑应该和下拉刷新完全一致：重置页码、清空已加载状态、替换数据。可以把这段逻辑抽成一个独立方法复用，避免多处写导致遗漏。
六、其他使用技巧和总结
关于样式方面，mt-loadmore默认的顶部提示区域有自己的样式，如果需要自定义，可以通过组件暴露的类名去覆盖，但注意不要破坏translate的位移逻辑，否则回弹动画会出问题。移动端还要记得在页面上禁掉浏览器默认的下拉行为和触摸穿透，可以在容器上监听touchmove并阻止默认事件，或者借助CSS的overscroll-behavior属性。
还有一点值得提醒，MintUI目前只对Vue2.x版本支持良好，如果你在Vue3项目中想用，需要考虑兼容方案，或者直接换用Vant等仍在活跃维护的组件库，它们的下拉刷新实现思路类似，迁移成本不高。理解了mt-loadmore的触发机制和状态复位逻辑之后，再去用任何类似的组件都会轻松很多。
总结一下核心要点：top-method和bottom-method各司其职；请求完成必须调用onTopLoaded和onBottomLoaded复位状态；数据加载完设置bottomAllLoaded；下拉刷新时记得重置bottomAllLoaded和页码；请求加防重标志位。把这些点都照顾到，下拉刷新和上拉加载基本就不会出问题了。
MintUI下拉刷新MintUI上拉加载loadmore组件修改时间：2026-09-10 02:10:39