Uni-app中CountDown倒计时组件 的用法和误区

 如何实现 小程序端  倒计时的 效果

 在 uni-app项目中 引入

<uni-countdown color="#FFFFFF" background-color="#00B26A"
 border-color="#00B26A" :day="1" :hour="2" :minute="30"
. :second="0"></uni-countdown>

 

 可以通过传递具体的 天数,时分秒 来控制 倒计时的 起始值, 也可以 通过传递总的 秒数 来控制 起始值.

<uniCountdown   
    @timeup="begin"
    :showColon="false"
	splitorColor="#fff"
	start
	:show-day="false"
	color="#fff"
	backgroundColor="#FF0128"
	:second="start"
	></uniCountdown>

 

<script>
// 定时器组件
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
    data(){
        start:20
    },
  
    methods:{
//定时结束后 触发的事件,可以重新对定时器赋值,来实现 组件重新开始运行,但需要在 unicountdown组件中清除一下上一个定时器.
        begin() {
			uni.showToast({
                    title: '时间到'
                })
                this.start= 29
		},
    }
}

</script>




//在unicountdown组件中的startData函数中清除 上一个定时器
startData(){
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
				if (this.seconds <= 0) {
					return;
				}
				this.countDown();
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					this.seconds--;
					if (this.seconds < 0) {
						this.timeUp();
						return;
					}
					this.countDown();
				}, 1000);
}

  data() {
    start:'2021-8-12 12:00:00',
    end:'2021-8-13 13:10:21'
}
computed(){
	    beginTime() {
				let beginTime = (Date.parse(this.start.replace(/-/g, '/'))- Date.parse(this.end.replace(/-/g, '/'))) / 1000;
				return beginTime;
			} 
		},
    },

因为 iso 不能将"2021-8-12 12:00:00"时间格式转换成当前  时间戳  需要用正则替换成"2021/8/12 12:00:00" 时间格式, 可以通过请求直接返回YYY/MM/DD 的日期格式.