# @wines/countup

> The countup @wines

Latest version **2.0.0** (published 2025-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wines/countup
pnpm add @wines/countup
yarn add @wines/countup
bun add @wines/countup
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-04-01 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 0 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/countup
- Repository: https://gitlab.itcjf.com/wines/countup
- npm.io page: https://npm.io/package/@wines/countup

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.6 (next) — 2025-04-01
- 2.0.0-next.5 — 2025-03-05
- 2.0.0-next.4 — 2025-03-05
- 2.0.0-next.3 — 2025-03-04
- 2.0.0-next.2 — 2025-02-28
- 2.0.0-next.1 — 2025-02-27
- 2.0.0-next.0 — 2025-02-27
- 1.5.0 — 2022-11-22
- 1.4.0 — 2022-02-23
- 1.3.1 — 2021-04-25
- 1.3.0 — 2021-04-25

## README

# `@wines/countup`

# CountUp 计数器

用于展现计数器。

## 使用指南

### 示例

```xml
<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>

```

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

---
_Source: https://npm.io/package/@wines/countup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._