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

基本使用

通过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

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-count-to-text-color	$text-color	文本颜色
$un-count-to-text-font-size	$text-base	文本字体大小