RollingNumber 滚动数字

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

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page @initFinished="loadingcomplete" title="滚动数字">
		<t-card class="mlrt.30" title="RollingNumber 滚动数字" sub-title="通过设置起始值、结束值、动画持续时间和小数位数的数字展示"></t-card>
		<t-group title="基础功能" content-class="fl">
			<t-rolling-number class="mbr.10" :startVal="30" :endVal="50000" :duration="7000"
				type="s"></t-rolling-number>
		</t-group>
		<t-group title="显示小数" content-class="fl">
			<t-rolling-number :startVal="30" mode="price" :endVal="50000.1555865" class="mbr.10" :decimals="2"
				:duration="4000" type="error"></t-rolling-number>
		</t-group>
		<t-group title="自由控制">
			<t-rolling-number ref="tCountTo" :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" class="mb.15" type="primary" @click="start">开始</t-button>
				<t-button size="small" class="mb.15" type="error" @click="pause">暂停</t-button>
				<t-button size="small" class="mb.15" type="warning" @click="continues">继续</t-button>
				<t-button size="small" class="mb.15" type="success" @click="stop">结束</t-button>
			</view>
		</t-group>
		<t-group title="自定义颜色">
			<t-rolling-number 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"
				class="s.45-c.#f56c6c"></t-rolling-number>
		</t-group>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				countToNode: null as ComponentPublicInstance | null
			};
		},
		methods: {
			loadingcomplete() {
				this.countToNode = this.$refs['tCountTo'] as ComponentPublicInstance
			},
			start() {
				this.countToNode?.$callMethod('start')
			},
			pause() {
				this.countToNode?.$callMethod('pause')
			},
			continues() {
				this.countToNode?.$callMethod('continues')
			},
			stop() {
				this.countToNode?.$callMethod('stop')
			}
		}
	}
</script>

Props

名称	描述	类型	默认值
mode	滚动模式	String	''
startVal	开始的数值	Number	1000
endVal	要滚动的目标数值	Number	2000
duration	滚动到目标数值的动画持续时间，单位为毫秒（ms）	Number	500
autoplay	设置数值后是否自动开始滚动	Boolean	true
decimals	小数位数	Number	0

Methods

名称	描述
start	开始滚动动画
pause	暂停滚动动画
continues	继续暂停的滚动动画
stop	停止滚动动画并直接显示目标数值
countAnimation	计算并执行滚动动画