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