更新记录

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

文档

• 补充数字更新示例、Props、数值转换规则及尺寸单位。
• 明确 duration 尚未生效，记录当前逐位动画时长。
• 说明负数、小数、大整数、格式化与页面生命周期限制。
• 本版本为文档完善更新，同步调整插件版本号；组件功能、接口和运行配置未变更。

1.0.0（2025-09-11） 下载此版本

滚动数字组件初始化

平台兼容性

uni-app(4.07)

其他

jf-number-roll

按位滚动的数字展示组件，适用于统计看板、累计数量和首页数据展示。修改 value 后，各位数字通过 CSS 位移动画更新。

功能与环境

• 自动拆分整数位，为每位数字生成滚动列。
• 根据 size 调整字号和数字单元格尺寸，单位为 rpx。
• 各位使用不同的动画时长，形成依次滚动效果。

组件基于 Vue 3、TypeScript 和 SCSS，无额外模块依赖。模块声明 HBuilderX ^3.1.0、uni-app ^4.07；平台标记包含 Chrome、App-vue、Android（最低 29）、iOS（最低 16）及微信小程序（基础库最低 3.0.3）。其他平台需自行验证；本次未进行运行或真机验证。

快速使用

将模块保留在 uni_modules 中，启用 easycom 后直接使用：

<template>
  <view>
    <jf-number-roll :value="count" :size="48" />
    <button @click="count += 128">更新数字</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(1234)
</script>

异步获取统计结果后，更新 count.value 即可。建议传入有限、非负、安全范围内的整数。

Props

当前每列宽高为 size + 6 rpx，动画时长为 (位索引 + 1) × 0.3 秒，索引从 0 开始。动画时间没有可用的外部配置接口。

数字处理规则

组件使用 parseInt 转换，不支持千分位、金额格式、固定小数位、前导零或自定义分隔符。NaN 更新会被忽略；超大数字可能被转换为指数形式，不适合精确大整数展示。

行为与限制

• value 更新后重新生成数字列，位数随数值变化，不保证固定宽度。
• size 更新会重新计算位移；布局空间由调用方安排。
• 不提供事件、插槽、v-model 或对外暴露的方法，也没有动画结束回调。
• 页面隐藏时会清理内部定时器；页面重新显示时没有专门的重播逻辑。

如需保留负号、小数、补零或配置时长，需要先扩展组件实现，再使用相应能力。