更新记录

1.0.1（2026-05-10） 下载此版本

更新使用文档

1.0.0（2026-05-10） 下载此版本

数字滚动累加动画初版

平台兼容性

uni-app(4.0)

six-count-up数字滚动累加动画

six-count-up支持数字累加动画效果，数字从0到指定数字逐步累加动画。

1. 基础使用

<template>
    <view class="content">
        <six-count-up ref="sixCountUpRef" displayNumber="0" :targetNumber="numVal"></six-count-up>
        <view @click="startRoll" class="card_but">开始动画</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                numVal:0
            }
        },
        onLoad() {
            let _this = this
            //模拟数据请求
            setTimeout(function(){
                _this.numVal = 9876589
            },4000)
        },
        methods: {
            startRoll(){
                this.$refs.sixCountUpRef.startRoll()
                // 若多个数字累加动画需要批量调用，可调用该方法
                // uni.$emit('sixCountUpBatch');
            }
        }
    }
</script>

2. prop属性说明

3. sixCountUp Methods

4. sixCountUp数字滚动累加动画组件动画调用

    // 单个数字滚动累加动画组件
    this.$refs.sixCountUpRef.startRoll()
    // 多个数字滚动累加动画组件
    uni.$emit('sixCountUpBatch');

5. 效果预览