更新记录

1.0.1（2026-04-09） 下载此版本

修改md

1.0.0（2026-04-09） 下载此版本

初始化

平台兼容性

uni-app(4.85)

number-scroll 数字滚动动画组件

组件简介

number-scroll 是一个轻量级的数字滚动动画组件，支持自定义动画时长、千分位分隔符、多种缓动函数，兼容 H5、微信小程序、支付宝小程序、App Vue 等 uni-app 全平台。

适用于：

• 数据大屏 / 统计看板
• 金额、成交量动态展示
• 倒计时/正计时数字效果

平台兼容性

属性 Props

事件 Events

方法 Methods

通过 ref 获取组件实例后，可调用以下方法：

使用示例

基础用法

<template>
    <view class="page">
        <number-scroll
            :value="targetValue"
            :start-value="0"
            :duration="2000"
            :decimal="2"
            :separator="true"
            color="#e74c3c"
            font-size="48rpx"
            @complete="onComplete"
        />
        <button @click="targetValue = 99999.99">开始滚动</button>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import numberScroll from '@/uni_modules/gck-number-scroll/components/gck-number-scroll/gck-number-scroll.vue'

const targetValue = ref(0)

const onComplete = () => {
    console.log('动画完成')
}
</script>