Tui Plus Vapor

Appearance

# t-rolling-number

RollingNumber 滚动数字

t-rolling-number 组件介绍 ​

t-rolling-number 是用于显示数字滚动动画的组件，支持起始值、目标值、动画持续时间、小数位数等配置，内置基于 t-text-price 的数字排版渲染，可直接通过 integer-class、decimal-class、currency-class 等外部样式类自定义显示效果。

t-rolling-number 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-rolling-number 基础用法 ​

基础用法参考 demo/rolling-number/rolling-number.uvue，通过 startVal 和 endVal 设置滚动范围，通过 duration 控制动画时长。

vue
<template>
	<t-page class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="RollingNumber 滚动数字"
				sub-title="通过插槽自定义数字渲染，支持起始值、结束值、动画持续时间等配置"></t-card>

		<t-group title="基础功能"
				 :class="[`fl faic w-100% mb-15`]">
			<t-rolling-number :startVal="30"
							  :endVal="50000"
							  :duration="7000"
							  :class="[`mbr-5 w-150`]"></t-rolling-number>
		</t-group>

		<t-group title="显示小数"
				 :class="[`fl faic mb-15`]">
			<t-rolling-number :startVal="30"
							  :endVal="50000"
							  :duration="4000"
							  :class="[`mbr-5`]"></t-rolling-number>
		</t-group>

		<t-group title="自由控制">
			<t-rolling-number ref="rol"
							  :startVal="30"
							  :endVal="50000"
							  :duration="10000"
							  :autoplay="false"></t-rolling-number>
			<view style="padding:10px 0;">
				<t-button size="small"
						  :class="[`mb-7`]"
						  type="primary"
						  @click="start">开始</t-button>
				<t-button size="small"
						  :class="[`mb-7`]"
						  type="error"
						  @click="pause">暂停</t-button>
				<t-button size="small"
						  :class="[`mb-7`]"
						  type="warning"
						  @click="continues">继续</t-button>
				<t-button size="small"
						  :class="[`mb-7`]"
						  type="success"
						  @click="stop">结束</t-button>
			</view>
		</t-group>

		<t-group title="自定义颜色和样式">
			<t-rolling-number :startVal="30"
							  :endVal="50000"
							  :duration="2000"
							  :decimals="2"
							  integer-class="s-30"
							  decimal-class="c-red"
							  currency-class="sfwb"></t-rolling-number>
			<t-rolling-number :startVal="30"
							  :endVal="50000"
							  :duration="3000"
							  :decimals="2"
							  integer-class="s-30 c-blue"
							  decimal-class="c-red"
							  currency-class="sfwb c-green"></t-rolling-number>
		</t-group>
	</t-page>
</template>

<script setup>
	const rol = ref<ComponentPublicInstance | null>(null)
	function start() {
		rol.value!.$callMethod('start')
	}
	function pause() {
		rol.value!.$callMethod('pause')
	}
	function continues() {
		rol.value!.$callMethod('continues')
	}
	function stop() {
		rol.value!.$callMethod('stops')
	}
</script>

t-rolling-number Props ​

属性名说明类型默认值
startVal开始的数值number1000
endVal要滚动的目标数值number2000
duration滚动到目标数值的动画持续时间，单位为毫秒（ms）number500
autoplay是否自动播放booleantrue
decimals小数位数number0
decimalPoint小数分隔符（同时作为货币前缀）string'￥'
fore是否作为前景显示，用于主题反色处理booleanfalse
uppercase是否转为大写显示（配合 t-text-price 的 uppercase-class）booleanfalse
integerClass整数部分样式（external-class）string''
decimalClass小数部分样式（external-class）string''
currencyClass货币符号样式（external-class）string''
uppercaseClass大写文本样式（external-class）string''
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string''
disabled是否禁用booleanfalse
effect组件显示主题string''
size组件尺寸string''

t-rolling-number External Classes ​

组件通过 defineOptions 暴露以下外部样式类，可直接在标签上以 kebab-case 形式传入：

类名说明
integer-class整数部分样式类
decimal-class小数部分样式类
currency-class货币符号样式类
uppercase-class大写文本样式类
vue
<t-rolling-number :startVal="0"
				  :endVal="9999"
				  :decimals="2"
				  integer-class="s-30"
				  decimal-class="c-red"
				  currency-class="sfwb"></t-rolling-number>

t-rolling-number Events ​

事件名说明回调参数
click点击时触发UniPointerEvent
transitionend动画结束时触发-
initFinished组件初始化完成触发，返回组件节点信息-
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-

t-rolling-number Expose ​

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

方法名说明
start()开始滚动动画（从 startVal 滚动到 endVal）
pause()暂停滚动动画
continues()继续滚动动画
stops()停止滚动并直接跳到结束值
vue
<template>
	<t-rolling-number ref="rol"
					  :startVal="30"
					  :endVal="50000"
					  :duration="10000"
					  :autoplay="false"></t-rolling-number>
	<t-button @click="start">开始</t-button>
	<t-button @click="pause">暂停</t-button>
	<t-button @click="continues">继续</t-button>
	<t-button @click="stop">结束</t-button>
</template>

<script setup>
	const rol = ref<ComponentPublicInstance | null>(null)
	function start() {
		rol.value!.$callMethod('start')
	}
	function pause() {
		rol.value!.$callMethod('pause')
	}
	function continues() {
		rol.value!.$callMethod('continues')
	}
	function stop() {
		rol.value!.$callMethod('stops')
	}
</script>

示例 ​

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