uni-app下拉刷新需在页面json中配置{"enablePullDownRefresh": true}才生效,仅写onPullDownRefresh函数无效;H5端不支持原生下拉,须用scroll-view模拟。

uni-app下拉刷新怎么配才生效
下拉刷新不是写个onPullDownRefresh函数就自动触发的,必须手动开启开关。很多开发者写了回调却拉不动,八成是忘了在页面配置里启用。
在页面的json文件中,必须显式设置:
{"enablePullDownRefresh": true}。App端和微信小程序都依赖这个配置;H5端则默认不支持(需配合scroll-view模拟,原生下拉无效)。
常见错误:
• 只写了onPullDownRefresh但没开enablePullDownRefresh → 完全无响应
• 在pages.json全局配置了,但单页json里又覆写为false → 当前页失效
• H5下强行期待原生下拉 → 实际不会触发,得换方案
uni-app触底加载(上拉加载更多)的关键触发条件
onReachBottom触发有硬性前提:当前页面滚动区域必须「可滚动且到底」。uni-app默认页面内容不满一屏时,根本不会触发——这点和微信原生逻辑一致,但容易被忽略。
确保能触发的实操要点:
- 页面根容器不能设
height: 100vh或固定高度(会截断滚动) - 内容区域需自然撑开,或用
scroll-view并显式设height和scroll-y - 在
json中配"onReachBottomDistance": 50(默认50px,数值越小越敏感) - App端需注意:nvue页面不支持
onReachBottom,只能用scroll-view的@scrolltolower
典型现象:列表只有一屏、加了position: fixed遮挡、或用了view包裹但未设display: block → 都会导致触底失效。
下拉刷新与触底加载的状态管理别硬编码
刷新/加载过程中要禁用重复触发,但很多人直接用isRefreshing = true后忘记恢复,结果卡死。更稳妥的是结合uni-app的API状态控制。
推荐做法:
- 下拉时调用
uni.startPullDownRefresh()(兼容H5+App),并在onPullDownRefresh末尾必加uni.stopPullDownRefresh() - 触底加载时,先设
loading = true,请求完成后再置false;同时在onReachBottom开头加if (loading || noMore) return - 网络失败时,不要静默吞掉错误——至少
uni.showToast({icon: 'none', title: '加载失败'}),否则用户以为卡了
注意:uni.stopPullDownRefresh()在H5端无效,但调用无害;而uni.hideNavigationBarLoading()已废弃,别再用。
分页加载的page参数容易错位
后端分页习惯用page=1, size=10,但uni-app里常有人把“当前页码”和“已加载条数”混用,导致重复拉取第1页或跳页。
正确处理方式:
- 初始
page = 1,每次触底后page++(不是page += 1后还拿去算偏移量) - 如果后端要
offset,应为(page - 1) * pageSize,而非page * pageSize - 接口返回
total时,建议存totalPage = Math.ceil(total / pageSize),比单纯判断res.data.length 更可靠(空数据、删减场景下不易误判)
特别提醒:App端iOS真机有时会因WebView缓存,把上一次的page参数带进下一次请求——务必在每次请求前打印page值确认。


















