# CountUp 数字滚动 v1.2.0
实现数字动态变化的组件
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 示例
# 基础用法
start-num和end-num分别传入数字滚动组件的起始数字以及终止数字，组件将自动完成从起始到终止的滚动
<pi-count-up start-num="0" end-num="999" />
<pi-count-up start-num="999" end-num="0" />
1
2
2
# 设置滚动动画时间
通过修改duration属性，即可控制组件从起始数字滚动至终止数字所需要的时间
<pi-count-up start-num="0" end-num="999" duration="10000" />
<pi-count-up start-num="0" end-num="999" duration="3000" />
1
2
2
# 显示小数位
decimals控制组件显示数字时保留小数的位数，默认为0（不保留小数）
<pi-count-up start-num="0" end-num="999" decimals="1" />
<pi-count-up start-num="0" end-num="999.99" decimals="2" />
1
2
2
# 设置千分位
通过thousands设置千分位符号
<pi-count-up start-num="0" end-num="19288585993" decimals="2" thousands="," />
1
# 缓动效果
<pi-count-up start-num="0" end-num="999" is-ease />
1
# 字体颜色以及大小
font-size控制字体大小，font-color控制字体颜色
<pi-count-up start-num="0" end-num="999" font-size="80" />
<pi-count-up start-num="0" end-num="999" font-color="red" />
1
2
2
# 关闭自动滚动
<pi-count-up start-num="0" end-num="999" :autoplay="false" />
1
# API
# CountUP Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| customStyle | 自定义样式，对象形式 | Object | false | - |
| customClass | 自定义样式类，字符串形式 | String | false | - |
| startNum | 起始值 | String | Number | false | 0 |
| endNum | 终止值 | String | Number | false | 0 |
| duration | 滚动到目标数值的动画持续时间，单位为毫秒（ms） | String | Number | false | 2000 |
| autoplay | 是否自动开始滚动 | Boolean | false | true |
| decimals | 要显示的小数位数 | String | Number | false | 0 |
| thousands | 千位符分隔符，默认为空 | String | false | '' |
| isEase | 是否在即将到达目标数值的时候，使用缓慢滚动的效果 | Boolean | false | true |
| fontColor | 字体颜色 | String | false | #333333 |
| fontSize | 字体大小，单位rpx | String | Number | false | 38 |
# CountUp Methods
| 事件名 | 描述 | 参数 |
|---|---|---|
| start | 开始滚动 | - |
| stop | 暂停滚动 | - |
| resume | 恢复滚动 | - |
| reset | 重置滚动 | - |