uv-ui

# CountTo 数字滚动

✈

组件名：uv-count-to

点击下载&安装 (opens new window)

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

注意

如果给组件的父元素设置text-align: center想让数字水平居中，可能是由于元素内容快速变化而导致渲染的问题，在APP上组件可能会有轻微的左右抖动现象， 解决办法是给父元素设置padding-left或者margin-left即可。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

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

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

# 设置滚动相关参数

  • 通过duration设置从开始值到结束值整个滚动过程所需的时间，单位ms
  • 通过useEasing设置滚动快结尾的时候，是否放慢滚动的速度，给用户更好的视觉效果，默认true
<uv-count-to :start-val="30" :end-val="500" :duration="2000" :useEasing="false"></uv-count-to>

# 是否显示小数位

  • 通过decimals设置显示的小数位，如果设置了，在滚动过程中，小数位会一起变化。
  • 通过decimal设置小数位分割符号。
  • 如果startVal和endVal是带小数的，应该设置decimals为startVal和endVal一样的小数位数值，如endVal为500.55，那么decimals应该设置为2。
<uv-count-to :startVal="30" :endVal="500.55" :decimals="2" decimal="."></uv-count-to>

# 千分位分隔符

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

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

# 滚动执行的时机

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

<template>
	<view>
		<uv-count-to ref="countTo" :endVal="5000.55" :autoplay="false"></uv-count-to>
		<button type="primary" size="small" @click="stop">暂停</button>
		<button type="primary" size="small" @click="start">开始</button>
		<button type="primary" size="small" @click="restart">继续</button>
	</view>
</template>
<script>
	export default {
		methods: {
			start() {
				this.$refs.countTo.start();
			},
			stop() {
				this.$refs.countTo.stop();
			},
			restart() {
				this.$refs.countTo.restart();
			},
		}
	}
</script>

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# CountTo Props

参数 说明 类型 默认值 可选值
startVal 开始值 String | Number 0 -
endVal 结束值 String | Number 0 -
duration 滚动过程所需的时间，单位ms String | Number 2000 -
autoplay 是否自动开始滚动 Boolean true true | false
decimals 要显示的小数位数，见上方是否显示小数位 String | Number 0 -
decimal 小数位分割符号 String . -
useEasing 滚动结束时，是否缓动结尾，见上方设置滚动相关参数 Boolean true true | false
color 字体颜色 String #606266 -
fontSize 字体大小，单位默认px String | Number 22 -
bold 字体是否加粗 Boolean false true | false
separator 千位分隔符，见上方千分位分隔符 String - -
customStyle 自定义外部样式 Object - -

# CountTo Methods

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

名称 说明
start autoplay为false时，通过此方法启动滚动，调用即从头开始滚动
restart 暂定状态，从暂停状态开始滚动；或者滚动状态下，暂停
stop 暂停滚动

# CountTo Events

事件名 说明 回调参数
@end 数值滚动到目标值时触发 -

← Avatar 头像 →