Repository navigation
v1.2.0 — 新增数字滚动组件 vui-count-to
新增第 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
两个刻意的实现选择
- 用
setTimeout递归而非requestAnimationFrame—— 后者在小程序 / app-nvue 各端实现不一致,setTimeout跨端最稳; - 用
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:sfc48/48、check:template48/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。