App端下拉刷新不触发需检查enablePullDownRefresh与onPullDownRefresh是否配对生效,pages.json中必须显式开启enablePullDownRefresh,且仅作用于页面根容器;iOS需足够下拉距离,Android需确认manifest中下拉刷新启用;刷新后须手动调用uni.stopPullDownRefresh()。

uni-app App端下拉刷新动画不触发?检查 enablePullDownRefresh 和 onPullDownRefresh 是否配对生效
App端(iOS/Android)的下拉刷新不是靠CSS或自定义组件“模拟”出来的,而是依赖原生容器的下拉手势识别机制。如果动画没反应,大概率是配置没走通原生层。
常见错误现象:onPullDownRefresh 根本不执行、下拉没阻力感、松手后无loading动画、页面卡住不动
-
pages.json里对应页面必须显式开启:"enablePullDownRefresh": true(仅设onPullDownRefresh函数无效) - App端不支持 H5 的
scroll-view模拟下拉,必须作用于页面根容器(即整个page) - iOS 真机要求下拉距离足够(约 80px+),太轻的滑动会被忽略;Android 部分厂商(如华为EMUI)会拦截原生下拉,需在
manifest.json → App模块配置 → 下拉刷新中确认启用 - 刷新中调用
uni.stopPullDownRefresh()必须手动触发,否则 loading 动画不会消失
想改下拉刷新样式?别碰 uni.showToast 或自定义弹窗,直接用 uni.startPullDownRefresh + 原生覆盖层
uni-app 的下拉刷新样式由原生容器控制,Web端可 hack,但 App 端无法通过 CSS 覆盖系统默认 loading。真正可控的方式只有一种:禁用默认动画,自己接管下拉过程。
使用场景:品牌色 loading、带文字提示(如“释放更新”)、图标旋转动画、与顶部导航联动
- 在
pages.json中设"enablePullDownRefresh": false,关闭原生下拉 - 用
scroll-view包裹内容,监听scrolltoupper事件模拟“触顶”,再结合scrollTop和deltaY判断下拉距离 - 自定义一个
ref="pullLayer"的遮罩层,用transform: translateY()跟随手指拖动,内部放你的 SVG 或uni-icons - 松手时若下拉距离 > 60px,才调用
uni.showLoading+ 数据请求,完成后uni.hideLoading
注意:此方案会失去原生阻尼和回弹物理效果,需手动实现 easing;iOS 上 scroll-view 的 bounce 属性要设为 true,否则触顶无反馈
Android 真机下拉刷新卡顿或白屏?查 vue.config.js 的 optimization.splitChunks 配置
这不是 UI 问题,而是 App 打包后 JS 加载阻塞导致的渲染中断。尤其在低端 Android 设备上,下拉瞬间触发 onPullDownRefresh,若该函数内依赖未预加载的模块(比如按需引入的 API 工具),就会卡住主线程。
性能影响:首次下拉延迟明显、连续下拉多次后内存泄漏、白屏几秒后才恢复
- 确保所有刷新逻辑用到的工具函数(如
api.refreshData)已在页面import中静态引入,避免运行时import() - 检查
vue.config.js是否误启用了 aggressive 分包,导致pull-down相关代码被拆到异步 chunk;建议对核心刷新模块加webpackChunkName注释并保留在主包 - App端调试时打开
uni-app devtools的 Performance 面板,录制一次下拉过程,重点看 JS Call Stack 是否出现长时间阻塞
下拉刷新后页面数据更新了,但视图没重绘?小心 Vue.set 或响应式丢失陷阱
App端 Vue 运行环境与 H5 有细微差异,某些对象赋值方式在 iOS WKWebView 或 Android X5 内核下无法触发响应式更新,导致“数据变了,UI 不变”。
常见错误现象:下拉后 console.log(this.list) 显示新数据,但 v-for 渲染还是旧的;this.$forceUpdate() 临时有效但治标不治本
- 避免直接给数组索引赋值:
this.list[0] = newItem→ 改用this.$set(this.list, 0, newItem)或this.list.splice(0, 1, newItem) - 避免替换整个响应式对象:
this.data = newData→ 改用Object.assign(this.data, newData)或逐字段赋值 - 如果用了
uni.getStorageSync读取本地缓存再赋值,注意它返回的是普通对象,需用JSON.parse(JSON.stringify())深拷贝后再赋给 data 字段
最稳妥的做法:下拉刷新后的数据统一走 this.$nextTick(() => { /* 更新 DOM 后操作 */ }),尤其涉及 scroll-view 的 scroll-top 重置

















