该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。

基本使用

通过startVal设置开始值，endVal设置结束值

<un-count-to :startVal="30" :endVal="500"></un-count-to>

设置滚动相关参数

• 通过duration设置从开始值到结束值整个滚动过程所需的时间，单位ms
• 通过useEasing设置滚动快结尾的时候，是否放慢滚动的速度，给用户更好的视觉效果

<un-count-to :start-val="30" :end-val="500" :duration="2000" :useEasing="false"></un-count-to>

是否显示小数位

通过decimals设置显示的小数位，如果设置了，在滚动过程中，小数位会一起变化。如果startVal和endVal是带小数的，应该设置decimals为 startVal和endVal一样的小数位数值，如endVal为1200.55，那么decimals应该设置为2。

<un-count-to :startVal="30" :endVal="500.55" :decimals="2"></un-count-to>

千分位分隔符

通过separator配置千分位分隔符，默认为空字符串，可以设置英文逗号","，此参数表现为endVal值超过1000时，比如为"1257"，那么滚动后会变成"1,245"，在金额数值时， 该参数可能会用上。

<un-count-to :endVal="1542" separator=","></un-count-to>

滚动执行的时机

可以通过autoplay设置是否需要初始化时就开始滚动，默认为true，如果设置为false，可以通过组件的ref去控制组件内部的start()和stop() 方法来开始或暂停。

<template>
	<un-count-to ref="uCountTo" :endVal="endVal" :autoplay="autoplay"></un-count-to>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CountToProps } from '@/uni_modules/uview-unix'

const endVal = ref<number>(5000.55)
const autoplay = ref<boolean>(false)
const uCountTo = ref<any>(null)

// 开始滚动数字
const start = () => {
	uCountTo.value?.start()
}

// 暂停滚动
const stop = () => {
	uCountTo.value?.stop()
}

// 暂停后重新开始滚动
const reStart = () => {
	uCountTo.value?.reStart()
}
</script>

API

Props

参数	说明	类型	默认值
startVal	开始值	string | number	0
endVal	结束值	string | number	0
duration	滚动过程所需的时间，单位ms	string | number	2000
autoplay	是否自动开始滚动	Boolean	true
decimals	要显示的小数位数，见上方说明	string | number	0
useEasing	滚动结束时，是否缓动结尾，见上方说明	Boolean	true
decimal	十进制分割	string	.
color	字体颜色	string	#606266
fontSize	字体大小，单位px	string | number	22
bold	字体是否加粗	Boolean	false
separator	千位分隔符，见上方说明	string	-
customStyle	自定义样式	string | object	{}

Methods

此方法如要通过ref手动调用

名称	说明	类型
start	autoplay为false时，通过此方法启动滚动	Function
stop	暂停滚动	Function
resume	暂停后重新开始滚动(从暂停前的值开始滚动)	Function
reStart	暂定状态，重新再开始滚动；或者滚动状态下，暂停	Function
reset	重置倒计时	Function

Events

事件名	说明	类型
end	数值滚动到目标值时触发	Function