- 分组
- 数据 · 1–3 个大数字
- 组件
Odometer·#odometer- 交互
- 每个数字是一个 build 步骤,出现时滚动到终值
适合
- 少数几个需要“数出来”的大数字
- 距离、人数、时长这类量级数字
不适合
- 数字之间要比较大小:用 BarChart
- 超过 3 个数字:用 StatRow
内容上限
| 1 | title ≤ 18 字 |
| 2 | stats 1–3 个:value ≤ 7 个字符,unit ≤ 4 个字符,label ≤ 12 字,note ≤ 28 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名,2–8 字 |
title · 必填 | string | string[] | 标题 |
stats · 必填 | { value, unit?, label, note? }[] | 数字 |
source | string | 事实出处 |
示例代码
<Odometer kicker="三个数字" title="远、久、看的人多" stats={[{ value: '384,400', unit: 'km', label: '地月平均距离' }, …]} />