倒计时 xCountdown

---

在线预览

在线模拟尺寸:

介绍

倒计时，可以精确到秒，毫秒,记住

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-countdown/x-countdown.uvue

使用

<x-countdown></x-countdown>

Props 属性

名称	说明	类型	默认值
time	``	number	0
actions	指令，可以通过变动此值来达到暂停，开始，结束的功能，当然也可以通过ref方法控制。"pause" \ "play" \ "reset" \ ""	union	""
format	显示格式 DD天，HH时，MM分，SS秒，MS毫秒	string	"DD天HH时MM分SS秒"
autoStart	``	boolean	false
unit	以秒还是毫秒为单位到计时。 ss\ ms	union	"ss"
fontSize	文本大小	string	"16"
color	文本颜色	string	"#333333"
captcha	是否使用验证码模式 统一倒计时实例	boolean	false

Events 事件

名称	参数	说明
change	time: number	时间变化时触发
pause	-	暂停时触发
start	-	开始时触发
complete	-	结束时触发

Slots 插槽

名称	说明	数据
default	插槽	status: string status: number status: string status: string status: string status: string status: string status: string time: string time: number time: string time: string time: string time: string time: string time: string label: string label: number label: string label: string label: string label: string label: string label: string ms: string ms: number ms: string ms: string ms: string ms: string ms: string ms: string ss: string ss: number ss: string ss: string ss: string ss: string ss: string ss: string mm: string mm: number mm: string mm: string mm: string mm: string mm: string mm: string hh: string hh: number hh: string hh: string hh: string hh: string hh: string hh: string dd: string dd: number dd: string dd: string dd: string dd: string dd: string dd: string

Ref 方法

名称	参数	返回值	说明
start	-	-	开始
pause	-	-	暂停
reset	-	-	重置
getStatus	-	-	获取当前运行状态，返回值是："initial" | "running" | "paused" | "finished"

示例文件路径

/pages/zhanshi/countdown

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">倒计时 xCountdown</x-text>
			<x-text  color="#999999" >倒计时，可以精确到秒，毫秒，尽量通过插槽来布局样式。</x-text>
		</x-sheet>
		<x-sheet >
			<view class="flex flex-row flex-row-center-center" >
				<x-countdown font-size="20" color="primary" :time="1000*59" v-model:actions="actions"></x-countdown>
			</view>
			<view class="flex flex-row flex-row-center-center mt-32">
				<x-button width="26%" @click="actions = 'play'">开始</x-button>
				<x-button width="26%" @click="actions = 'pause'" class="mx-20">暂停</x-button>
				<x-button width="26%" @click="actions = 'reset'">重置</x-button>
			</view>
		</x-sheet>
		
		<x-sheet >
			<view class="flex flex-row flex-row-center-center" >
				<x-countdown  font-size="20" color="error" unit="ms" format="SS:MS" :time="1000*5" v-model:actions="actions2"></x-countdown>
			</view>
			<view class="flex flex-row flex-row-center-center mt-32">
				<x-button width="26%" @click="actions2 = 'play'">开始</x-button>
				<x-button width="26%" @click="actions2 = 'pause'" class="mx-20">暂停</x-button>
				<x-button width="26%" @click="actions2 = 'reset'">重置</x-button>
			</view>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				actions:"",
				actions2:"",
			};
		}
	}
</script>

<style lang="scss">

</style>