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 的日期格式.