# CountTo 数字滚动

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

注意

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

# 平台差异说明

App(vue) App(nvue) H5 小程序

# 基本使用

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

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

# 设置滚动相关参数

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

# 是否显示小数位

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

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

# 千分位分隔符

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

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

# 滚动执行的时机

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

<template>
	<up-count-to ref="uCountToRef" :endVal="endVal" :autoplay="autoplay"></up-count-to>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const endVal = ref(5000.55);  
const autoplay = ref(false);  
  
// 创建对子组件的引用  
const uCountToRef = ref(null);  
  
// 定义方法  
const start = () => {  
  if (uCountToRef.value) {  
    uCountToRef.value.start();  
  }  
};  
  
const paused = () => {  
  if (uCountToRef.value) {  
    uCountToRef.value.paused();  
  }  
};  
  
const reStart = () => {  
  if (uCountToRef.value) {  
    uCountToRef.value.reStart();  
  }  
};  
</script>
<script>
	export default {
		data() {
			return {
				endVal: 5000.55,
				autoplay: false
			};
		},
		methods: {
			start() {
				this.$refs.uCountToRef.start();
			},
			paused() {
				this.$refs.uCountToRef.paused();
			},
			reStart() {
				this.$refs.uCountToRef.reStart();
			},
		}
	}
</script>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

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

# Methods

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

名称 说明
start autoplayfalse时,通过此方法启动滚动
reStart 暂停后重新开始滚动(从暂停前的值开始滚动)
paused 暂停滚动

# Event

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