@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 | 渲染组件的回调函数 | - |