必须在pages.json中显式设"enablepulldownrefresh": false才能关闭原生下拉刷新动画,支付宝端还需加"allowsbouncevertical": "no";其他端无效或报错,js中调用uni.stoppulldownrefresh等方法无法替代该配置。

pages.json 中必须设 enablePullDownRefresh: false
关掉原生下拉刷新动画,第一步不是写 JS,而是改配置。只要 enablePullDownRefresh 在 pages.json 对应页面的 style 里是 true,iOS/Android 就会启用系统级下拉手势和 loading 动画,你写的任何 CSS 或组件都无效。
必须显式设为 false,且这个配置只在 pages.json 生效,写在 JS 里或用条件编译动态赋值都不起作用。
- 错误写法:
uni.setEnablePullDownRefresh(false)(不存在该 API) - 错误写法:在
onLoad里调用uni.stopPullDownRefresh()(此时还没触发,无意义) - 正确位置:只在
pages.json的该页面style下写"enablePullDownRefresh": false
支付宝端需额外加 allowsBounceVertical: "NO"
即使 enablePullDownRefresh 设为 false,支付宝小程序仍默认允许垂直方向弹性拖拽(即“空拉”效果),看起来像下拉刷新没关干净。
这是支付宝原生容器的独立行为,uni-app 不自动屏蔽,必须手动干预:
- 使用条件编译,在
pages.json中对应页面的style里加:"allowsBounceVertical": "NO"(注意值是字符串"NO",不是布尔值false) - 不加这行,用户下拉时仍能看到页面被“拉长”再弹回,容易误以为刷新功能还开着
- 其他端(微信、H5、App)不需要此配置,加了也无效或报错
App 端关闭后仍出现橡皮筋效果?检查 bounce 属性
iOS App 端即使关了原生下拉,Webview 底层仍可能触发 rubber banding(橡皮筋回弹)。这不是刷新动画,但视觉上很像——页面顶部被拉伸后回弹。
根本原因是 WKWebView 的 bounces 属性默认为 YES,而 uni-app 的 H5 渲染模式无法通过 JS 修改它:
- 若用
scroll-view做局部滚动,确保其:bounce="false"(注意是绑定语法,不是字符串) - 若用页面根容器滚动,nvue 模式下可设
<scroll-view bounce="false"></scroll-view>;vue 模式下无解,只能接受该行为或换 nvue - 别试图用
touchmove.prevent拦截——WKWebView 在事件捕获阶段就已响应,JS 拦不到
为什么 uni.stopPullDownRefresh() 不能关掉动画?
这个函数只对「已触发的原生下拉刷新」有效。如果 enablePullDownRefresh 是 false,onPullDownRefresh 根本不会执行,uni.stopPullDownRefresh() 调了也白调,控制台还会报 stopPullDownRefresh: fail not in pull down refresh state。
常见误解是以为调它就能“隐藏动画”,其实它只是收尾动作,前提是系统已经进入了刷新状态。关动画这件事,纯属配置层面的事,和运行时 JS 无关。
真正容易被忽略的是:不同端的“关闭”含义不同——iOS 关的是手势识别+动画,支付宝关的是动画但留着拖拽感,App 端关了还可能有橡皮筋。得按端一个个补漏,不能指望一个配置打天下。











