t-rolling-number

RollingNumber 滚动数字

组件介绍

t-rolling-number 是用于显示数字滚动动画的组件，通过插槽将变化的数字传递给外部自定义渲染，支持起始值、结束值、动画持续时间等配置。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

通过 startVal 和 endVal 设置滚动范围，通过插槽接收当前数字并自定义渲染样式。

<template>
  <t-rolling-number :startVal="0" :endVal="9999" :duration="2000">
    <template #default="{ number }">
      <text :class="[`s-20 sfwb ttc-pn`]">{{ number }}</text>
    </template>
  </t-rolling-number>
</template>

Props

属性名	说明	类型	默认值
startVal	开始的数值	number	1000
endVal	要滚动的目标数值	number	2000
duration	滚动动画持续时间（毫秒）	number	500
autoplay	是否自动播放	boolean	true

Slots

插槽名	作用域	说明
default	{ number: number }	当前滚动的数值，由外部自定义渲染样式

<t-rolling-number :startVal="0" :endVal="9999">
  <template #default="{ number }">
    <text>{{ number.toFixed(2) }}</text>
  </template>
</t-rolling-number>

Expose

组件通过 defineExpose 暴露以下方法，可通过 ref 调用：

方法名	说明
start()	开始滚动动画
pause()	暂停滚动动画
continues()	继续滚动动画
stops()	停止滚动并跳到结束值

<template>
  <t-rolling-number ref="rol" :startVal="0" :endVal="9999" :autoplay="false">
    <template #default="{ number }">
      <text :class="[`s-17 sfwb`]">{{ number }}</text>
    </template>
  </t-rolling-number>
  <button @click="start">开始</button>
</template>

<script setup>
const rol = ref(null)
function start() {
  rol.value?.$callMethod('start')
}
</script>

示例

完整使用示例参考 demo/rolling-number/rolling-number.uvue。