CountTo 数字滚动

CountTo 数字滚动 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过start-val设置开始值，end-val设置结束值

<u-count-to :start-val="30" :end-val="500"></u-count-to>

设置滚动相关参数

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

<u-count-to :start-val="30" :end-val="500" :duration="2000" :use-easing="false"></u-count-to>

是否显示小数位

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

<u-count-to :start-val="30" :end-val="500.55" :decimals="2"></u-count-to>

千分位分隔符

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

<u-count-to :end-val="1542" separator=","></u-count-to>

滚动执行的时机

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

<template>
	<u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
</template>

<script>
	export default {
		data() {
			return {
				endVal: 5000.55,
				autoplay: false
			};
		},
		methods: {
			start() {
				this.$refs.uCountTo.start();
			},
			paused() {
				this.$refs.uCountTo.paused();
			},
			reStart() {
				this.$refs.uCountTo.reStart();
			},
		}
	}
</script>

API

Props

Methods

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

Event