uni-app怎么实现带有数字滚动动画的仪表盘

夏瑶吖_6148

夏瑶吖_6148

2026-07-10

976人浏览

原创

u-count-to 一闪而过是因参数错误或时机不当:start-val/end-val须为number、duration须为数字、decimals需匹配小数位;小程序需用uni.createselectorquery获取节点,禁用v-for重复实例,单位与千分位须后置处理,嵌套scroll-view会干扰requestanimationframe。

uni-app怎么实现带有数字滚动动画的仪表盘

直接用 u-count-to 最稳,但参数配错、时机没卡准、单位混进组件里,三处一错,数字就“啪”一下闪完,根本看不出滚动。

为什么 u-count-to 一闪而过

不是组件坏了,是它默认只认三个数:起始值、目标值、持续时间——少一个或类型不对,动画就退化成赋值。

  • start-val 和 end-val 必须是 Number 类型,写成字符串如 "1200" 会触发内部 NaN,最终显示 0 或空白
  • duration 必须显式传数字,比如 1200,写成 "1200" 会导致计算异常,动画实际只有默认的 300ms
  • 要保留小数,decimals 得和 end-val 实际位数一致:比如 end-val=899.65,就得设 decimals="2"
  • 小程序中数据常在 onLoad 后异步到达,此时节点还没挂载,autoplay="true" 会失效;建议先设 autoplay="false",等 this.$nextTick() 后再调 this.$refs.uCountTo.start()

小程序里 countUp.js 报 target is null

这不是你代码写错了,是 uni-app 渲染时机和 DOM 节点可用性不一致。原版 countUp.js 直接 document.getElementById,但小程序没有真实 DOM。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • H5/APP 端可用 document.getElementById,但必须确保在 onReady 或 $nextTick 之后执行
  • 小程序端必须走 uni.createSelectorQuery().in(this),且加 .fields({ node: true }) 才能拿到可操作节点
  • 拿到 res.node 后不能直接传给原版 countUp.js——它不认小程序虚拟节点;要么换 countup-weapp,要么降级为手动 requestAnimationFrame 更新 innerText
  • 别在 v-for 每一项都 new 一个实例,复用同一实例 + update() 更省资源

带单位(万/亿)和千分位的正确拼法

单位和分隔符绝不能塞进滚动逻辑里,否则缓动过程中它们会跟着跳、抖、闪。

  • 单位(如 “万”)必须用计算属性拼接:{{ (currentValue / 10000).toFixed(1) }} 万,而不是把 "万" 塞进 u-count-to 的 end-val
  • separator="," 要开,它不只是美观——人眼识别 1,245,678 比 1245678 快 30% 以上;但旧版支付宝小程序不支持,得 fallback:String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  • 别把 u-count-to 塞进 scroll-view:一旦父容器启用 scroll-with-animation 或频繁触发 @scroll,就会抢占 requestAnimationFrame 调度权,导致卡顿、跳数

手写 requestAnimationFrame 滚动时的两个硬坑

自己实现看似自由,但结束判断错、四舍五入没处理好,数字就蹦高或抖动。

  • 停止条件别用 current >= end,要用 elapsed >= duration;帧率波动时某帧可能算出略超 end 的值,导致多执行一帧、“蹦高”
  • 缓动函数输出后必须四舍五入再赋值:Math.round(current) 或 current.toFixed(1),否则小数累积会让视图抖动(尤其 decimals="0" 时)
  • 避免用 Math.round 中间插值——比如从 100 滚到 103,中间算出 100.3→100.6→100.9→101.2,直接 Math.round 会变成 100→101→101→101→102,出现“卡住”感;改用 Math.floor 或保留一位小数显示
  • 记得在组件卸载时清除动画帧:cancelAnimationFrame(this.animationId),否则可能内存泄漏

最易被忽略的是:滚动动画不是独立模块,它和父容器渲染节奏强耦合。哪怕参数全对、时机也准,只要嵌套在 scroll-view 或开启了 scroll-with-animation 的容器里,requestAnimationFrame 就会被干扰——这不是 bug,是 uni-app 渲染链路里的确定性瓶颈。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2423

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5223

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6270

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5838

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

823

5

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

3991

6

canva可画使用技巧汇总
canva可画使用技巧汇总

本专题汇集了PHP中文网精心整理的Canva可画新手使用技巧大全,专为零基础用户打造。无论你是想制作精美海报、PPT还是社交媒体配图,这里都有从注册登录、模板搜索到AI辅助设计、导出分享的全流程保姆级教程。通过深入浅出的图文指南,帮助你快速跨越设计门槛,轻松掌握Canva可画的实用操作,让每个人都能成为设计达人!

2026.05.19

244

21

vue2.0和3.0区别
vue2.0和3.0区别

vue2.0和3.0区别:vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现,vue3中使⽤了es6的proxy API对数据代理,实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

1674

5

vue3的生命周期有哪些
vue3的生命周期有哪些

vue3的生命周期:1、beforecreate;2、created;3、beforemount;4、mounted;5、beforeupdate;6、updated;7、beforedestroy;8、destroyed;9、activated;10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

12002

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习