uni-app下拉刷新需同时配置pages.json中enablePullDownRefresh为true并定义onPullDownRefresh方法;App端支持自定义样式,H5和小程序不支持;主动触发需注意平台限制和调用时机;无论请求成败都必须调用uni.stopPullDownRefresh()。

uni-app 下拉刷新开启后没反应?检查 enablePullDownRefresh 和生命周期
下拉刷新不触发,大概率是配置没生效或页面没注册监听。uni-app 的下拉刷新不是默认开启的,必须手动配置 + 编写回调函数。
-
pages.json里对应页面的"enablePullDownRefresh": true必须显式设置(仅 H5 端可 runtime 开启,App 和小程序端必须静态配置) -
onPullDownRefresh必须定义在页面实例中(export default对象内),不能写在methods或组件内部 - App 端如果用了自定义导航栏(
navigationStyle: custom),下拉区域会被遮挡——此时需配合pullDownRefresh配置项里的backgroundColor和color手动调整视觉反馈位置
自定义下拉刷新样式只在 App 端生效?别被文档误导
uni-app 官方说“支持自定义下拉样式”,但实际只有 App 平台(iOS/Android)真正支持 DOM 层级的样式覆盖;H5 和微信小程序走的是平台原生下拉控件,无法用 CSS 改变箭头、文字或动画。
- App 端可通过
pages.json中的"pullDownRefresh"节点控制:"color": "#007AFF"(加载指示器颜色)、"backgroundColor": "#ffffff"(下拉背景色) - H5 端若强行想改,只能禁用原生下拉(
"enablePullDownRefresh": false),自己实现一个顶部 sticky 区域 +touchstart/touchmove手动监听,成本高且体验割裂 - 微信小程序端完全不可定制,连颜色都由
navigationBarBackgroundColor间接影响,别浪费时间试 CSS
uni.startPullDownRefresh() 主动触发时白屏或报错?注意平台限制和时机
这个 API 在部分平台会直接 crash 或静默失败,不是代码写错了,而是调用条件没满足。
- 必须确保当前页面已启用下拉刷新(
enablePullDownRefresh: true),否则 App 端抛not enabled pull down refresh错误 - H5 端不支持该 API,调用即无反应;微信小程序端支持,但必须在用户已有交互(如点击)后 5 秒内调用,否则被拦截
- 避免在
onLoad里立即调用——页面 DOM 可能未就绪,建议延后到onReady或加setTimeout(..., 100) - 调用后记得手动
uni.stopPullDownRefresh(),否则加载状态卡住,且再次下拉不会触发onPullDownRefresh
下拉刷新里请求数据失败,stopPullDownRefresh 忘了调用?后果比你想的严重
这是最常被忽略的细节:只要进了 onPullDownRefresh,无论成功失败,都必须调用 uni.stopPullDownRefresh()。不调,下拉动画就永远转着,用户无法再次下拉,也看不到错误提示。
- 别只在
then里 stop,catch和finally都得有——推荐统一写在finally块里 - 如果用了
async/await,务必包在try/catch/finally中,否则 Promise 拒绝时 stop 就丢了 - App 端还有个隐藏坑:如果请求超时(比如设了 10s timeout),但用户提前上滑离开页面,
stopPullDownRefresh仍会执行,可能触发「页面不存在」警告——加个this.$scope存在性判断更稳
下拉刷新看着简单,但跨端行为差异大,尤其 stop 的时机和平台兼容性,一漏就卡死整个刷新流程。

















