uni-app渐变进度条需用background-image实现，但H5端易被默认样式覆盖，须设background-color: transparent!important，渐变方向用90deg而非to right，百分比用calc()计算；动画优先用transform: scaleX()并配合will-change优化，文案与进度需同步更新防不同步，多端兼容需加降级色并统一用十六进制色值。
uni-app里用linear-gradient画不出渐变进度条？检查background-image写法是否被覆盖
uni-app的view不支持直接用progress组件实现自定义渐变，得靠background-image: linear-gradient(...)手动画。但很多人写了CSS却没效果，根本原因是：uni-app在H5端会注入默认样式，background或background-color可能把background-image盖掉了。
- 务必显式清空
background-color，写成background-color: transparent - H5端需加
!important（小程序端不用），因为uni-app生成的内联样式权重高 - 渐变方向别写
to right——部分安卓WebView不兼容，改用90deg - 百分比数值必须用
calc()动态算，不能靠width撑开，否则iOS真机上动画卡顿
.bargain-progress {
height: 6px;
background-color: transparent !important;
background-image: linear-gradient(90deg, #ff6a00, #ff2d00);
background-size: 100% 100%;
background-repeat: no-repeat;
}uni-app中animation做砍价进度条动画卡顿？优先用transform: scaleX()
直接改width触发重排，尤其在低端安卓机上掉帧明显；而transform走GPU合成，更稳。
- 把进度条容器设为
overflow: hidden，内部子元素用transform: scaleX({{percent}})缩放 - percent值必须是0~1之间的小数（比如0.73），不是0~100的整数
- 别在
v-for里反复绑定transform——用computed缓存计算结果，否则频繁响应式更新拖慢渲染 - 微信小程序真机测试时，
scaleX在iOS上没问题，但部分安卓机需加will-change: transform
砍价进度条要显示“还差¥0.03”文字？text和progress不同步的坑
进度条动效和文案更新不同步，常见于用setTimeout模拟砍价时只改了percent没同步更新remainPrice。
- 所有状态变量（
currentPrice、targetPrice、remainPrice）必须放在同一个data对象里，避免响应式丢失 - 不要用
Math.round()四舍五入价格——砍价场景要求精确到分，一律用Number(val.toFixed(2)) - 文案更新必须和
transform动画在同一nextTick里执行，否则iOS上看到“进度跑完了，文字才跳” - 如果后端返回的是“已砍掉金额”，前端计算剩余时别用
origin - cut，要用parseFloat((origin - cut).toFixed(2))防浮点误差
uni-app多端兼容：小程序/APP/H5渐变色表现不一致？统一用background简写+降级色
H5支持linear-gradient完整语法，但微信小程序基础库2.25.0以下不支持90deg写法，APP端某些Android WebView对transparent解析异常。
- 写成
background: linear-gradient(90deg, #ff6a00, #ff2d00), #eee——逗号后是降级纯色背景 - 微信小程序里，如果渐变失效，检查
uni-app版本是否≥3.2.13（旧版编译会删掉gradient） - APP端若出现色块断裂，把渐变色值全换成十六进制（别用
rgb()或hsl()） - 真机调试时，H5端看Chrome DevTools的
Computed面板，确认background-image没被uni-app的.uni-progress-bar类覆盖
砍价进度条看着简单，但transform动画节奏、浮点精度、多端渐变兼容这三点，任何一个没压住，用户就感觉“卡”“不准”“颜色怪”。尤其是安卓低端机上，scaleX比width稳，但will-change又不能滥用——得测真机，别信模拟器。
