Skip to content

v1.2.0 — 新增数字滚动组件 vui-count-to

Choose a tag to compare

@virtualman333 virtualman333 released this 16 Sep 00:48
· 36 commits to main since this release

新增第 48 个组件 vui-count-to。此前 47 个组件里没有任何数据展示型组件 —— Progress 是唯一沾边的,但它表达的是「比例」而不是「数值」,金额 / 用量 / 统计数字这类需要滚动动画的场景只能自己写。

新增 <vui-count-to>

场景 写法
金额 <vui-count-to :end="1234567.89" :decimals="2" separator="," prefix="¥" /> → ¥1,234,567.89
用量 <vui-count-to :end="98304" separator="," suffix=" tokens" />
  • 属性:start / end / duration(传 0 直接显示终值)/ decimals / separator(千分位)/ prefix / suffix / autoplay / easing(linear、easeOutQuad、easeOutCubic)/ color / fontSize / bold
  • 方法:restart() 重播、reset() 立即跳终值
  • 事件:finish(带终值)、click

两个刻意的实现选择

  1. 用 setTimeout 递归而非 requestAnimationFrame —— 后者在小程序 / app-nvue 各端实现不一致,setTimeout 跨端最稳;
  2. 用 Date.now() 时间差而非帧计数推进进度,掉帧时动画不会变慢或超时。

数字用 tabular-nums 等宽渲染,滚动过程中整串数字不会左右抖动。重复调用 restart() 会先清掉上一轮定时器;卸载时清理定时器,不泄漏。

其它

  • 演示页 pages/demo/demo.vue 增加 CountTo 卡片(含重播按钮)
  • scripts/gen-docs.py 的 CATEGORY 登记该组件(API 文档与 README 清单由它驱动)
  • 版本 1.1.0 → 1.2.0(新增组件属 minor),48 个组件 package.json 同步

自测

  • 组件真实逻辑 34 项断言全通过(用 @vue/compiler-sfc 解析出选项对象后在 Node 里驱动真实逻辑)
  • npm run check:sfc 48/48、check:template 48/48、check 通过
  • npm pack 产物含 uni_modules/vui-count-to(581.3 kB)

npm registry 上的 1.2.0 尚未发布(本环境不允许执行 npm publish)。需要时执行 npm publish --access public。
建议先 publish 1.2.0 再跑 npm run release —— release.js 是无条件递增版本的,直接跑会升到 1.2.1 而跳过 1.2.0。