数值动画

组件介绍

以递增 | 递减动画的方式展示一个数值。

组件图示

组件属性

属性名称	类型	默认值	作用
num	Number	0	需要展示的数值
stepNumber	Number	50	动画步骤总数
timer	Number	800	动画总时间
keepInt	Boolean	false	保证整数递增
customClass	Array	['ux-primary-text', 'ux-text']	组件自定义样式

演示代码

<template>
	<view class="ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-body ux-mt">数值动画</text>
		<view class="ux-flex ux-row ux-nowrap ux-mt ux-bg-white ux-padding">
			<ux-number-animate 
			v-if="num != 0" 
			:num="num" 
			:customClass="['ux-primary-color', 'ux-h3']"
			@done="done"></ux-number-animate>
		</view>
		<text class="ux-h6 ux-color-grey ux-body ux-mt">小数展示</text>
		<view class="ux-flex ux-row ux-nowrap ux-mt ux-bg-white ux-padding">
			<ux-number-animate 
			:num="999.99" 
			:keep-int="false" 
			:customClass="['ux-primary-color', 'ux-h3']"
			@done="done"></ux-number-animate>
		</view>
		<text class="ux-h6 ux-color-grey ux-body ux-mt">负数展示</text>
		<view class="ux-flex ux-row ux-nowrap ux-mt ux-bg-white ux-padding">
			<ux-number-animate 
			:num="-999.99" 
			:keep-int="false" 
			:stepNumber="300" 
			:customClass="['ux-primary-color', 'ux-h3']"
			@done="done"></ux-number-animate>
		</view>
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			num : 0
		}
	},
	onLoad:function(){
		// 模拟api 读取一个数值
		setTimeout(()=>{
			this.num = 999;
		},1000)
	},
	methods:{
		done : function(){
			uni.showToast({
				title:"动画执行完毕"
			});
		}
	}
}
</script>
<style scoped>

</style>