u-count-to 组件不滚动,90% 是 start-val、end-val、duration 未配齐或类型错误:start-val 和 end-val 必须为 number 类型,duration 必须显式传毫秒数,小数需同步设 decimals;小程序需用 $nexttick + createselectorquery 等节点挂载后再操作;点赞等动态变化应通过修改 end-val 或调用 start() 重播动画,而非销毁重建;手写滚动函数时需用 elapsed 判断结束、floor 计算中间值、动态算步长。

u-count-to 组件不滚动?检查这三处硬性参数
数字“一闪而过”或根本不动,90% 是 start-val、end-val、duration 没配齐或类型错。它不是“设了 end-val 就能动”的懒加载组件。
-
start-val和end-val必须是Number类型,字符串如"1234"会触发NaN,动画直接跳过 -
duration必须显式传数字(单位毫秒),默认 300ms —— 对 1000+ 的数,肉眼根本看不出滚动 - 要显示小数(比如
end-val=899.6),必须同步设decimals="1",否则四舍五入逻辑错乱,末尾卡住
小程序真机上 target is null?别在 onLoad 里初始化
错误不是代码写错了,是节点还没渲染出来你就急着找 DOM。微信/支付宝小程序里 querySelector 返回的是虚拟节点,原生 countUp.js 会炸。
- 必须等视图真正挂载:用
this.$nextTick()+uni.createSelectorQuery().in(this) - 查节点时加
.fields({ node: true }),拿到res.node后不能直接喂给原版 countUp —— 得换countup-weapp或降级为手动innerText更新 - H5/APP 端可直接用
document.getElementById,但 App 端(尤其 nvue)仍需uni.createSelectorQuery()并加.in(this)
点赞数动态变化时如何重播动画?别销毁重建
用户点一次赞,数字从 127 → 128,你不需要删掉组件再插入一个新实例 —— 那样会闪、会卡、且破坏响应式链路。
知乎数据获取 - 极简设计,支持三级认证降级(Browser Profile → File Cookie → Fallback),确保数据可靠获取 Zhihu Data Fetcher - Minimalist design with three-level auth fallback (Browser Prof...
- 用
v-if控制组件显隐会导致动画只执行一次,后续变化完全失效 - 正确做法:保留组件 ref,修改
end-val后组件自动重置并重播(前提是autoplay为true) - 如果组件没暴露自动重播能力(比如某些轻量版),就手动调
this.$refs.countTo.start(),而不是 new 实例
手写简易滚动函数避坑要点
第三方组件太重、兼容性难控?自己写 20 行也够用,但两个地方极易翻车:
- 结束判断别用
current >= end,改用elapsed >= duration,避免帧率抖动导致多算一帧、数字超纲 - 别用
Math.round()做中间值,从 100 滚到 103 时会出现 100→101→101→101→102 的“粘滞感”,换成Math.floor(start + (end - start) * progress)或toFixed(1)显示 - 步长别写死每帧 +1,按总差值 / 总帧数动态算;
duration 时强制设为 16,防除零
真实场景中,最常被忽略的是「数值来源时机」:后端返回的点赞数常带千分位字符串(如 "1,245"),直接塞进 end-val 就崩。务必先 Number(val.replace(/,/g, ''))。









