RollingNumber (滚动数字)

RollingNumber 是一个用于显示数字滚动动画的组件，支持多种配置，包括滚动模式、开始数值、目标数值、动画持续时间、是否自动播放和小数位数等。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

html

<template>
	<t-page main-class="p-30">
		<t-card main-class="mb-30" title="RollingNumber 滚动数字" sub-title="通过设置起始值、结束值、动画持续时间和小数位数的数字展示"></t-card>
		<t-group title="基础功能" main-class="fl w-100% tdb mb-30">
			<t-rolling-number main-class="mbr-10" :startVal="30" :endVal="50000" :duration="7000"
				type="s"></t-rolling-number>
		</t-group>
		<t-group title="显示小数" main-class="fl tdb mb-30">
			<t-rolling-number :startVal="30" mode="price" :endVal="50000-1555865" main-class="mbr-10" :decimals="2"
				:duration="4000" type="error"></t-rolling-number>
		</t-group>
		<t-group title="自由控制">
			<t-rolling-number ref="rol" main-class="tdp sta-c s-35 sfwb" :startVal="30" mode="price" :endVal="50000-15" :decimals="2" :duration="10000"
				:autoplay="false" type="error"></t-rolling-number>
			<view style="padding:10px 0;">
				<t-button size="small" main-class="mb-15" type="primary" @click="start">开始</t-button>
				<t-button size="small" main-class="mb-15" type="error" @click="pause">暂停</t-button>
				<t-button size="small" main-class="mb-15" type="warning" @click="continues">继续</t-button>
				<t-button size="small" main-class="mb-15" type="success" @click="stop">结束</t-button>
			</view>
		</t-group>
		<t-group title="自定义颜色">
			<t-rolling-number main-class="s-45 c-blue" :startVal="30" mode="price" decimal-point="￥" :endVal="50000-15"
				:decimals="2" :duration="2000" type="error"></t-rolling-number>
			<t-rolling-number :startVal="30" mode="price" :endVal="50000" :decimals="2" :duration="3000" type="error"
				main-class="s-45 c-#f56c6c"></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>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
startVal	`Number`	`1000`	开始的数值
duration	`Number`	`500`	滚动到目标数值的动画持续时间，单位为毫秒（ms）
autoplay	`Boolean`	`true`	是否自动播放
decimals	`Number`	`1`	小数位数
endVal	`Number`	`2000`	要滚动的目标数值

方法

名称	参数	返回值	说明
start	-	-	开始滚动动画
continues	-	-	继续滚动动画
pause	-	-	暂停滚动动画
stops	-	-	停止滚动动画

RollingNumber (滚动数字) ​

支持平台 ​

示例代码 ​

属性 ​

方法 ​

RollingNumber (滚动数字)

支持平台

示例代码

属性

方法