u-count-to最省事但需配对参数：start-val、end-val、duration必须同为Number且duration显式设置；decimals需与end-val小数位一致；autoplay建议手动控制；separator和use-easing影响可读性与信任感。

用 u-count-to 最省事，但得配对好参数

uni-app 里做数字从 0 滚到目标值的动画，u-count-to 是目前最稳定、跨端兼容性最好的选择——它封装了 requestAnimationFrame + 缓动逻辑，不用自己算时间戳或处理小数精度问题。

常见错误是只传 end-val，漏掉 start-val 或 duration，导致动画一闪而过（默认 duration 是 300ms）或从 0 开始但显示异常。

• start-val 和 end-val 必须都是 Number 类型，字符串会触发 NaN 渲染
• 如果要保留小数，decimals 必须显式设置，且 end-val 的实际小数位要一致，比如 end-val="1200.55" 就得配 :decimals="2"
• 小程序里 autoplay 默认为 true，但如果你在 onLoad 时数据还没 ready，建议设 :autoplay="false"，等数据就绪再调 this.$refs.uCountTo.start()

手动实现用 requestAnimationFrame 更可控，但别用 setInterval

需要自定义缓动曲线（比如 easeOutCubic）、或和其它动画同步节奏时，就得自己写。这时候 requestAnimationFrame 是唯一靠谱选择；setInterval 在低端安卓机或微信小程序里容易掉帧、跳数，甚至卡死。

核心逻辑就三步：记录起始时间、每帧算进度比、用缓动函数映射当前值、四舍五入后更新 data。

• 必须用 this.$nextTick 包裹 setData，否则 Vue2 下可能视图不更新；Vue3 组合式 API 则直接赋值响应式变量即可
• 缓动函数别手写，推荐直接抄 uView 源码里的 easeOutCubic(t)：return --t * t * t + 1，简单又平滑
• 动画结束判断别用 current >= end，要用 elapsed >= duration，避免因帧率波动导致多执行一帧、数字超纲

separator 和 use-easing 不是装饰项，影响可读性和体验

大屏展示金额、PV/UV 等关键指标时，separator="," 不只是“好看”，而是降低用户扫读成本——人眼识别 “1,245,678” 比 “1245678” 快 30% 以上；而 use-easing 关乎信任感：匀速滚动像计数器，缓动收尾才像真实数据增长。

• 开启 use-easing 后，最后 20% 时间内速度明显放缓，用户能看清最终数值，避免“嗖一下就没了”
• separator 在 H5 和 App 端表现一致，但某些旧版支付宝小程序不支持千分位，如需兼容，得 fallback 到正则格式化：String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
• 如果数字带单位（如 “万”、“亿”），不要塞进 u-count-to，应在组件外用计算属性拼接，否则缓动过程单位会跟着抖动

滚动动画卡顿？先查是不是在 scroll-view 里嵌套了它

大屏页面常把数字滚动组件放在可滚动容器里（比如 scroll-view），但一旦容器启用了 scroll-with-animation 或频繁触发 @scroll，就会干扰 requestAnimationFrame 的帧调度，尤其在 iOS 微信里，动画直接变幻灯片。

• 解决方案很简单：给数字组件加 style="position: relative; z-index: 1;"，让它脱离滚动流渲染
• 更彻底的做法是，把所有动态数字区域抽成 fixed 定位层，和滚动内容解耦——大屏项目里这几乎是标配
• 真要嵌在 scroll-view 内，务必关掉 scroll-with-animation，并确保父容器没监听 @scroll 做重绘操作

数字滚动看着简单，真正上线后被质疑“为什么停不住”“怎么少了一位”，往往不是逻辑错，而是 decimals 没对齐、separator 在某个平台失效、或者动画被滚动事件悄悄劫持了。留心这些点，比调半天缓动函数管用。