uView

# CountDown 倒计时

该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。

# 平台差异说明

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

# 基本使用

  • 通过timestamp参数设置倒计时间，单位为毫秒
<template>
	<u-count-down :timestamp="timestamp"></u-count-down>
</template>

<script>
	export default {
		data() {
			timestamp: 24*3600*1000,
		}
	}
</script>

# 格式化显示

<template>
	<u-count-down :timestamp="timestamp" format="DD天HH时mm分ss秒" @end="end"></u-count-down>
</template>

<script>
	export default {
		data() {
			return {
				timestamp: 24*3600*1000,
			}
		},
		methods: {
			end() {
				uni.showToast({
					title: "倒计时结束",
					icon: 'none'
				});
			},
		}
	}
</script>

<style lang="scss">

</style>

# 自定义格式（插槽形式）

<template>
	<u-count-down :timestamp="30 * 60 * 60 * 1000" format="DD:HH:mm:ss" autoStart @change="onChange">
		<view class="time">
			<text class="time__item">{{ timeData.days }}&nbsp;天</text>
			<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
			<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
			<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
		</view>
	</u-count-down>

</template>

<script>
	export default {
		data() {
			return {
				timeData: {},
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>

<style lang="scss">
	.time {
		display: flex;
		align-items: center;

		&__item {
			color: #000000;
			font-size: 12px;
			text-align: center;
		}
	}
</style>

# API

# Props

参数 说明 类型 默认值 可选值
timestamp 倒计时，单位为毫秒 String 、 Number 0 -
format 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 String HH:mm:ss -
autoplay 是否自动开始倒计时，如果为false，需手动调用开始方法。见上方说明 Boolean true false

# Events

事件名 说明 回调参数
end 倒计时结束 -
change 倒计过程中，每秒触发一次 示例:{"days": 0,"hours": 0,"minutes": 0,"seconds": 40,"milliseconds": 351}

# Methods

需要通过ref获取倒计时组件才能调用，见上方"倒计时执行的时机"说明

名称 说明
start 开始倒计时
pause 暂停倒计时
reset 重置倒计时

← CountTo 数字滚动 →