基本用法#

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

<CountUp startVal={30} endVal={500} />

设置滚动相关参数#

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

<CountUp startVal={30} endVal={500} duration={2000} useEasing={false} />

是否显示小数位#

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

<CountUp startVal={30} endVal={500.55} decimals={2} />

千分位分隔符#

通过separator配置千分位分隔符，默认为空字符串，可以设置英文逗号","，此参数表现为endVal值超过1000时，比如为"1234"，那么会变成"1,234"。

<CountUp endVal={1500} separator=',' />

手动控制#

通过 ref 选择器获取到组件实例后，可以调用start、pause、resume、reset方法。

/* eslint-disable */
import react from 'react'
import { View, Button } from '@tarojs/components'

export default function Demo() {
  const CountToRef = react.useRef<any>()
  const handleFinish = () => {
    console.log('count finish')
  }

  return (
    <View>
      <CountTo
        startVal={30}
        endVal={500}
        ref={CountToRef}
        onFinish={handleFinish}
      />
      <View>
        <Button onClick={() => CountToRef.current?.start()} >开始</Button>
        <Button onClick={() => CountToRef.current?.pause()} >暂停</Button>
        <Button onClick={() => CountToRef.current?.resume()} >继续</Button>
        <Button onClick={() => CountToRef.current?.reset()} >重置</Button>
      </View>
    </View>
  )
}

效果#

ICountUpRef#

CountUpProps#