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="weui-btn-area text-center">
            <button type="primary" size="mini" bindtap="start">Start</button>
            <button type="primary" size="mini" bindtap="pauseResume">Pause/Resume</button>
            <button type="primary" size="mini" bindtap="reset">Reset</button>
            <button type="primary" size="mini" bindtap="update">Update</button>
        </view>
    </view>
</view>

import { $wuxCountUp } from '../../dist/index'
Page({
    data: {},
    onLoad() {
        this.c1 = new $wuxCountUp(1, 1024, 0, 2, {
            printValue(value) {
                this.setData({
                    c1: value,
                })
            }
        })
        this.c2 = new $wuxCountUp(0, 88.88, 2, 2, {
            printValue(value) {
                this.setData({
                    c2: value,
                })
            }
        })
        this.c3 = new $wuxCountUp(0, 520, 0, 2, {
            printValue(value) {
                this.setData({
                    c3: value,
                })
            }
        })
        this.c1.start()
        this.c2.start()
    },
    start() {
        this.c3.start(() => {
            wx.showToast({
                title: '已完成',
            })
        })
    },
    reset() {
        this.c3.reset()
    },
    update() {
        this.c3.update(1314)
    },
    pauseResume() {
        this.c3.pauseResume()
    },
})

视频演示

CountUp

API