App端原生下拉刷新仅支持color和backgroundColor，SVG等自定义元素无效；需改用scroll-view的refresher-enabled模式，通过template #refresher插入SVG，并设refresher-default-style="none"才能实现。
App端用pages.json配置原生下拉样式，但SVG不生效
App端（iOS/Android）的原生下拉刷新只支持color和backgroundColor两个样式属性，所有SVG、GIF、自定义DOM元素都无法注入到原生下拉层中。你写再多<svg></svg>标签，只要走的是enablePullDownRefresh: true + onPullDownRefresh这套路径，系统就只会渲染原生loading指示器——iOS是旋转圆圈，Android是波纹动画，完全不可替换。
常见错误现象：onPullDownRefresh能触发，但顶部始终显示默认蓝圈；试图在<view></view>里放SVG并设position: fixed; top: 0，结果下拉时该区域不动、无跟随感、松手后不触发刷新。
- pages.json中
"pullDownRefresh": { "color": "#ff6b6b", "backgroundColor": "#fff" }仅改变颜色和背景，不影响结构 - Web端和小程序端更严格：H5压根不读这个配置，微信小程序连
color都受限于navigationBarBackgroundColor - 想用SVG动画？必须放弃原生下拉，改用
scroll-view模拟
scroll-view + refresher插槽才是SVG落地的唯一路径
scroll-view的refresher-enabled模式允许你把任意内容塞进slot="refresher"或template #refresher，这才是SVG能真正渲染并响应下拉动作的地方。
关键点在于：必须关闭默认样式，否则SVG会被原生控件遮盖或错位。
- 设置
refresher-default-style="none"，否则<template></template>里的SVG不会显示 -
refresher-threshold建议设为80，太小（如45）容易误触，太大（>120）用户难感知 - SVG需包裹在
<view class="refresher-slot"></view>内，并用transform: translateY()手动跟随下拉距离（靠@refresherpulling事件中的e.detail.deltaY） - 松手后若
deltaY >= refresher-threshold，才调用uni.showLoading()或直接启动SVG动画
示例片段：
<scroll-view
refresher-enabled="true"
refresher-threshold="80"
refresher-default-style="none"
:refresher-triggered="triggered"
@refresherpulling="onPulling"
@refresherrefresh="onRefresh"
@refresherrestore="onRestore"
>
<template #refresher>
<view class="refresher-content">
<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="16" fill="none" stroke="#409eff" stroke-width="3" />
<path d="M20 4 L20 12 M20 28 L20 36 M4 20 L12 20 M28 20 L36 20" stroke="#409eff" stroke-width="3"/>
</svg>
<text class="tip-text">{{ tipText }}</text>
</view>
</template>
</scroll-view>
SVG动画要配合状态机，不能只靠CSS animation
单纯给SVG加animation: spin 1s linear infinite会导致刷新完成时动画还在转——因为refresher-triggered切换和SVG的CSS动画生命周期不同步。必须用JS控制SVG的display、opacity或class来精确匹配下拉阶段。
典型状态流转：pull → ready（松手阈值达成）→ loading（请求中）→ success（完成）。
- 在
@refresherpulling里根据e.detail.deltaY动态更新tipText和SVG旋转角度（用transform: rotate()） - 进入
loading状态后，移除旋转动画，换上<animatetransform></animatetransform>或GSAP驱动的SVG路径动画 - 请求完成后，立刻
this.triggered = false，并重置SVG到初始状态，避免下次下拉时残留动画帧 - Android部分机型（如华为EMUI）对SVG渲染性能敏感，建议SVG路径数≤5，避免
<defs></defs>嵌套过深
真机调试时iOS和Android行为差异必须验证
iOS的scroll-view bounce回弹有物理阻尼，下拉松手后会惯性滑动一段距离，导致@refresherrestore触发晚于预期；Android则多为硬停止，@refresherrefresh和@refresherrestore几乎同时发生。同一套SVG动画在这两平台可能表现完全不同。
- iOS真机测试必须开启
bounce="true"，否则@refresherpulling事件可能不触发 - Android部分厂商ROM（如小米MIUI）会拦截
touchmove，需在manifest.json→ App模块 → “下拉刷新”中确认启用 - SVG在iOS上默认抗锯齿较弱，细线（
stroke-width: 1）易发虚，建议最低设为2 - 不要依赖
uni.stopPullDownRefresh()来结束SVG动画——它只对原生下拉有效，scroll-view模式下应靠triggered变量和@refresherrestore事件清理
最易被忽略的是：SVG作为内联元素，在scroll-view里默认不继承父容器flex布局，text-align: center无效，必须用display: flex; justify-content: center显式居中。
