扩展组件（uni-ui）之uni-countdown

uni-countdown 是 uni-app 的 uni-ui 组件库中的一个组件，用于创建倒计时功能。这个组件适用于需要显示倒计时的场景，如秒杀活动、限时优惠、考试计时等。

基本用法

在使用 uni-countdown 之前，你需要确保已经正确安装了 uni-ui 库，并在页面中引入了 uni-countdown 组件。

引入组件

<template>
    <uni-countdown :endTime="endTime" :showDay="true" @timeup="handleTimeUp"></uni-countdown>
</template>

<script>
    import uniCountdown from '@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue'
    export default {
        components: { uniCountdown },
        data() {
            return {
                // 假设 endTime 是一个未来的时间戳
                endTime: Date.now() + 1000 * 60 * 60 * 24 // 24小时后
            }
        },
        methods: {
            handleTimeUp() {
                console.log('倒计时结束');
            }
        }
    }
</script>

属性

• endTime：倒计时结束的时间（时间戳或符合 Date.parse() 的字符串格式）。
• showDay：是否显示天数，默认为 false。
• format：时间的格式，默认为 HH:mm:ss，可包含 DD（天）、HH（小时）、mm（分钟）、ss（秒）。

事件

• timeup：倒计时结束时触发的事件。

示例

以下是一个倒计时组件的示例，假设你想要一个为期 24 小时的倒计时：

<uni-countdown :endTime="endTime" :showDay="true" @timeup="handleTimeUp"></uni-countdown>

在这个示例中，倒计时组件将显示剩余的天、小时、分钟和秒，直到达到设定的结束时间。

注意事项

• 确保传入的 endTime 是有效的未来时间点。
• 如果倒计时时间较长，可以设置 showDay 为 true 来显示天数。
• 倒计时结束时可以通过监听 timeup 事件来执行相关操作。

更多关于 uni-countdown 组件的使用细节，可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。