CountTo 数字滚动

数字滚动效果，支持整数、小数、千分位等。适用于数据展示、统计数值动态变化等场景。

代码示例

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="CountTo数字滚动">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
			<zk-count-to :start-val="0" :end-val="2023" :duration="2000" />
		</zk-theme>

		<!-- 小数点 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="小数点" align="center" />
			<zk-count-to :start-val="0" :end-val="2023.88" :decimals="2" :duration="2000" />
		</zk-theme>

		<!-- 千分位分隔符 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="千分位分隔符" align="center" />
			<zk-count-to :start-val="0" :end-val="1234567" separator="," :duration="2000" />
		</zk-theme>

		<!-- 前缀后缀 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="前缀后缀" align="center" />
			<zk-count-to :start-val="0" :end-val="1234" prefix="￥" suffix=".00" :duration="2000" />
		</zk-theme>

		<!-- 自定义样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义样式" align="center" />
			<zk-count-to :start-val="0" :end-val="2023" :duration="2000" :custom-style="customStyle" />
		</zk-theme>

		<!-- 控制动画 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="控制动画" align="center" />
			<zk-count-to ref="countTo" :start-val="0" :end-val="2023" :duration="2000" :autoplay="false" />
			<view class="button-group">
				<view class="group-item">
					<zk-button text="开始" type="primary" size="small" margin="0 12rpx" @click="start" />
				</view>
				<view class="group-item">
					<zk-button text="暂停" type="primary" size="small" margin="0 12rpx" @click="pause" />
				</view>
				<view class="group-item">
					<zk-button text="继续" type="primary" size="small" margin="0 12rpx" @click="resume" />
				</view>
				<view class="group-item">
					<zk-button text="重置" type="primary" size="small" margin="0 12rpx" @click="reset" />
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					fontSize: '48rpx',
					color: '#2979ff',
					fontWeight: 'bold'
				}
			}
		},
		methods: {
			start() {
				this.$refs.countTo.start()
			},
			pause() {
				this.$refs.countTo.pause()
			},
			resume() {
				this.$refs.countTo.resume()
			},
			reset() {
				this.$refs.countTo.reset()
			}
		}
	}
</script>

<style lang="scss">
	.button-group {
		margin-top: 24rpx;
		flex-direction: row;

		align-items: center;
		display: flex;
	}

	.group-item {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	/* #ifdef APP-NVUE */
	.button-group {
		width: 662rpx;
	}

	/* #endif */
</style>

API

Props 属性

参数 说明 类型 默认值 可选值
start-val 起始值，可以是整数或小数 number 0 -
end-val 结束值 number 0 -
duration 滚动动画时长，单位毫秒 number 2000 -
decimals 小数点位数 number 0 -
separator 千分位分隔符 string , -
prefix 前缀 string '' -
suffix 后缀 string '' -
autoplay 是否自动开始计数 boolean true -
custom-style 自定义样式对象，支持 fontSize、color、fontWeight 等标准样式属性 object {} -

Events 事件

事件名 说明 回调参数
start 开始计数时触发 -
end 计数结束时触发 -

Methods 方法

方法名 说明 参数
start 开始计数 -
pause 暂停计数 -
resume 继续计数 -
reset 重置到起始值 -

注意事项