1.5.0 • Published 1 year ago
@wines/countup v1.5.0
@wines/countup
CountUp 计数器
用于展现计数器。
使用指南
示例
<view class="page">
<view class="page__hd">
<view class="page__title">CountUp</view>
<view class="page__desc">计数器</view>
</view>
<view class="page__bd">
<view class="text-center">
<view class="countup">{{ c1 }}</view>
<view class="countup">{{ c2 }}</view>
<view class="countup">{{ c3 }}</view>
</view>
<view class="button-sp-area">
<wux-button wux-class="btn" type="light" bind:click="start">Start</wux-button>
<wux-button wux-class="btn" type="light" bind:click="pauseResume">Pause/Resume</wux-button>
<wux-button wux-class="btn" type="light" bind:click="reset">Reset</wux-button>
<wux-button wux-class="btn" type="light" bind:click="update">Update</wux-button>
</view>
</view>
</view>
import './index.less';
import { CountUp } from '@wines/countup';
import { PageCustom, PageData } from '@wines/core';
Page<PageData, PageCustom>({
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 | 渲染组件的回调函数 | - |