@wines/countup

CountUp 计数器

用于展现计数器。

使用指南

$3

``xml


CountUp
计数器



{{ c1 }}
{{ c2 }}
{{ c3 }}


Start
Pause/Resume
Reset
Update




`

`ts
import './index.less';
import { CountUp } from '@wines/countup';
import { PageCustom, PageData } from '@wines/core';

Page({
data: {},
onLoad() {
const setData = this.setData.bind(this);
this.c1 = new CountUp(1, 1024, 0, 2, {
printValue(value) {
setData({
c1: value,
});
},
});

this.c2 = new CountUp(0, 88.88, 2, 2, {
printValue(value) {
setData({
c2: value,
});
},
});

this.c3 = new CountUp(0, 520, 0, 2, {
printValue(value) {
setData({
c3: value,
});
},
});

this.c1.start();
this.c2.start();
},
start() {
this.c3.start(() => {
void wx.showToast({
title: '已完成',
});
});
},
reset() {
this.c3.reset();
},
update() {
this.c3.update(1314);
},
pauseResume() {
this.c3.pauseResume();
},
});
`

API

| 参数 | 类型 | 描述 | 默认值 |
| -------------------- | ---------- | ------------------ | ------ |
| startVal | number | 起始值 | - |
| endVal | number | 结束值 | - |
| decimals | number | 小数点位数 | 0 |
| duration | number | 刷新时间 | 0 |
| options | object | 配置项 | - |
| options.useEasing | boolean | 是否开启过渡动画 | true |
| options.useGrouping | boolean | 是否分隔数值 | true |
| options.separator | string | 分隔符 | , |
| options.decimal | string | 小数点符号 | . |
| options.easingFn | function | 自定义过渡动画 | - |
| options.formattingFn | function | 自定义格式化函数 | - |
| options.printValue | function` | 渲染组件的回调函数 | - |