CountTo 数字滚动

数字滚动组件。

基本用法

设置 endVal 属性，表示最终值。设置 startVal 属性，表示起始值。设置 duration 属性，表示从起始值到结束值数字变动的时间。设置 autoplay 属性，表示是否自动播放。设置 decimals 属性，表示保留的小数位数。设置 decimal 属性，表示小数点符号。设置 prefix 属性，表示数字前缀。设置 suffix 属性，表示数字后缀。设置 fontSize 属性，表示字体大小。设置 color 属性，表示文本颜色。

vue

<wui-count-to :endVal="2024" suffix="年" color="#16baaa"></wui-count-to>
<wui-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wui-count-to>
<wui-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wui-count-to>
<wui-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wui-count-to>

设置主题

通过type参数设置文本主题，我们提供了五类属性：primary error success warning default-默认。

html

<wui-count-to type="primary" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wui-count-to>
<wui-count-to type="error" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wui-count-to>
<wui-count-to type="success" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wui-count-to>
<wui-count-to type="warning" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wui-count-to>
<wui-count-to type="info" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wui-count-to>

手动控制

通过 start 方法开始倒计时，通过 pause 方法暂停倒计时，通过 reset 方法重置倒计时。

html

<wui-count-to
  ref="countTo"
  :auto-start="false"
  prefix="￥"
  :startVal="1000"
  :decimals="3"
  :endVal="9999.32"
  :fontSize="32"
  suffix="%"
  color="#1e9fff"
></wui-count-to>
<wui-grid clickable border>
  <wui-grid-item text="开始" icon="play-circle-stroke" @itemclick="start" />
  <wui-grid-item text="暂停" icon="pause-circle" @itemclick="pause" />
  <wui-grid-item text="重置" icon="refresh" @itemclick="reset" />
</wui-grid>

import type { CountToInstance } from '@/uni_modules/elegant-wui-uni/components/wui-count-to/types'

const countTo = ref<CountToInstance>()

const start = () => {
  countTo.value!.start()
}
const pause = () => {
  countTo.value!.pause()
}
const reset = () => {
  countTo.value!.reset()
}

Attributes

参数	说明	类型	可选值	默认值	最低版本
fontSize	字体大小	number	16	default	-
color	文本颜色	string	-	''	-
type	主题类型	string	'primary' / 'error' / 'warning' / 'success'	default	-
startVal	起始值	number	-	0	-
endVal	最终值	number	-	2024	-
duration	从起始值到结束值数字变动的时间	number	-	3000	-
autoplay	是否自动播放	boolean	-	true	-
decimals	保留的小数位数	number	(需大于等于 0)	0	-
decimal	小数点符号	string	-	'.'	-
separator	三位三位的隔开效果	string	-	','	-
prefix	前缀	string	-	-	-
suffix	后缀	string	-	-	-
useEasing	是否具有连贯性	boolean	-	true	-

Events

事件名称	说明	参数	最低版本
finish	动画完成时触发	—	-
mounted	组件加载完成时时触发	-	-

Methods

方法名	说明	参数	最低版本
start	开始动画	—	-
pause	暂停动画	—	-
reset	重置动画，若 `auto-start` 为 `true`，重设后会自动开始倒计时	—	-

Slots

名称	说明	最低版本
default	默认插槽	-
prefix	前缀插槽	-
suffix	后缀插槽	-

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-
custom-style	根节点样式	-

源代码

文档

• 组件

CountTo 数字滚动 ​

基本用法 ​

设置主题 ​

手动控制 ​

Attributes ​

Events ​

Methods ​

Slots ​

外部样式类 ​

源代码 ​