更新记录

0.01（2026-08-13） 下载此版本

【v1.0.0】2026-08-13

• 首次发布，全新上架
• 支持 startVal / endVal / duration / decimals 基础属性
• 内置 6 种缓动曲线：linear、easeOutCubic、easeInOutCubic、 easeOutQuart、easeOutExpo、easeOutBounce
• 支持千分位分隔符 separator（默认 ","）
• 支持前缀 prefix / 后缀 suffix（如 ¥、%、元）
• 支持实例方法：start / pause / resume / reset
• 支持 complete 完成回调事件
• 兼容 Vue2 / Vue3 与 HBuilderX 可视化配置
• 仅 3KB 体积，零第三方依赖

平台兼容性

uni-app(3.8.1)

uni-app x(3.8.1)

zmui-countto 数字递增动画组件

轻量 · 高性能 · 多端通用 · 零依赖

zmui-countto 是一款数字递增动画组件，支持多种缓动曲线、千分位分隔、小数位、前缀后缀自定义，提供暂停 / 继续 / 重置等实例方法，可自由控制动画节奏。兼容 H5 / App / 微信小程序 / 支付宝小程序 / 百度小程序 / 抖音小程序等所有 uni-app 平台。

📦 安装方式

方式一：HBuilderX 插件市场安装（推荐）

1. 打开 HBuilderX，进入「插件市场」搜索 zmui-countto；
2. 点击「使用插件」→ 选择目标项目导入；
3. 插件会自动放置到项目的 components/zmui-countto/ 目录。

方式二：手动拷贝

将 components/zmui-countto/zmui-countto.vue 文件拷贝到你的项目：

你的项目/
└── components/
    └── zmui-countto/
        └── zmui-countto.vue

🚀 快速开始

1. 页面中引入并注册组件

<template>
    <view class="page">
        <!-- 简单用法：从 0 滚动到 10000 -->
        <zmui-countto :end-val="10000" separator="," />
    </view>
</template>

<script>
    import zmuiCountto from '@/components/zmui-countto/zmui-countto.vue'

    export default {
        components: {
            zmuiCountto
        }
    }
</script>

2. 完整示例：业务统计卡片

<template>
    <view class="stat-card">
        <view class="label">今日成交额</view>
        <view class="value">
            <zmui-countto
                :end-val="986532"
                :duration="2500"
                prefix="¥"
                separator=","
                color="#1e88e5"
                font-size="44rpx"
                @complete="onComplete" />
        </view>
    </view>
</template>

<script>
    import zmuiCountto from '@/components/zmui-countto/zmui-countto.vue'

    export default {
        components: { zmuiCountto },
        methods: {
            onComplete(val) {
                console.log('动画完成，最终值：', val)
            }
        }
    }
</script>

⚙️ 属性（Props）

缓动曲线 easingFn 可选值

🎯 事件（Events）

🛠 实例方法（Methods）

通过 ref 获取组件实例后调用：

<template>
    <view>
        <zmui-countto ref="countTo" :end-val="8888" :duration="5000" />
        <button @tap="onPause">暂停</button>
        <button @tap="">继续</button>
        <button @tap="">重置</button>
        <button @tap="onRestart">重新播放</button>
    </view>
</template>

<script>
    import zmuiCountto from '@/components/zmui-countto/zmui-countto.vue'

    export default {
        components: { zmuiCountto },
        methods: {
            onPause() {
                this.$refs.countTo.pause()   // 暂停
            },
            () {
                this.$refs.countTo.resume()  // 从当前值继续
            },
            () {
                this.$refs.countTo.reset()   // 重置到起始值
            },
            onRestart() {
                this.$refs.countTo.start()   // 重新播放
            }
        }
    }
</script>

📱 常见场景示例

场景一：数据大屏

<zmui-countto :end-val="99999999" separator="," :duration="3000"
    color="#ffffff" font-size="64rpx" font-weight="900" />

场景二：百分比进度

<zmui-countto :end-val="98.6" :decimals="1" suffix="%" :duration="1500"
    color="#43a047" />

场景三：金额展示

<zmui-countto :end-val="128500" prefix="¥" separator="," :duration="2000"
    color="#fb8c00" font-size="40rpx" />

场景四：Vue3 + Composition API

<template>
    <zmui-countto :end-val="count" separator="," />
</template>

<script setup>
    import { ref } from 'vue'
    import zmuiCountto from '@/components/zmui-countto/zmui-countto.vue'

    const count = ref(6666)
</script>

❓ 常见问题（FAQ）

Q1：组件在微信小程序端不生效？ 请确认已在 pages.json 对应页面或全局启用了组件引用，并检查基础库版本 ≥ 2.2.3（建议使用最新基础库）。

Q2：数字跳变不流畅？ 组件默认每 16ms（约 60fps）驱动一次动画，若页面存在大量复杂布局，可适当增大 duration 以获得更平滑的视觉体验。

Q3：如何修改数字的排列对齐？ 可通过 customStyle 传入自定义样式，例如 customStyle="width:200rpx;justify-content:center;"。

Q4：动画中途切换页面会报错吗？ 不会。组件在销毁时会自动清理定时器，无需手动处理。

📄 许可证

MIT License，开源可商用，欢迎 star 与反馈。

📮 联系我们

• 插件市场：搜索 zmui-countto
• 问题反馈：插件市场评论区留言，24 小时内回复