更新记录
1.0.2(2022-07-28) 下载此版本
新增 @GetTime|时间变化触发 事件
1.0.1(2022-07-28) 下载此版本
新增 @GetTime|时间变化触发 事件
1.0.0(2022-07-28) 下载此版本
1.0.0
查看更多平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 | 
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | - | - | - | 
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 | 
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ | 
其他
| 多语言 | 暗黑模式 | 宽屏模式 | 
|---|---|---|
| × | × | √ | 
CountDown 倒计时
组件名:wly-countdown 代码块:
uCountDown
倒计时组件。
安装方式
本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components。
基本用法
在 template 中使用组件
<!-- 一般用法 -->
<wly-countdown :day="1" :hour="1" :minute="12" :second="40"></wly-countdown>
<!-- 不显示天数 -->
<wly-countdown :show-day="false" :hour="12" :minute="12" :second="12"></wly-countdown>
<!-- 修改颜色 -->
<wly-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></wly-countdown>
<!-- 插槽模式 -->
<wly-countdown :day="1" :hour="1" :minute="12" :second="40" showType="slot">
    <template v-slot="{day, hour, minute, second}">
        <text>{{day}}天</text>
        <text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
    </template>
</wly-countdown>
<!-- emit 事件模式 -->
<wly-countdown :day="1" :hour="1" :minute="12" :second="40" @GetTime="GetTime"></wly-countdown>
API
Countdown Props
| 属性名 | 类型 | 默认值 | 说明 | 
|---|---|---|---|
| backgroundColor | String | #FFFFFF | 背景色 | 
| color | String | #000000 | 文字颜色 | 
| splitorColor | String | #000000 | 分割符号颜色 | 
| day | Number | 0 | 天数 | 
| hour | Number | 0 | 小时 | 
| minute | Number | 0 | 分钟 | 
| second | Number | 0 | 秒 | 
| showDay | Boolean | true | 是否显示天数 | 
| showColon | Boolean | true | 是否以冒号为分隔符 | 
| start | Boolean | true | 是否初始化组件后就开始倒计时 | 
| showType | String | true | 展示类型 default 默认, slot 插槽,emit 函数返回 | 
Countdown Events
| 事件称名 | 说明 | 返回值 | 
|---|---|---|
| @timeup | 倒计时时间到触发事件 | - | 
| @GetTime | 时间变化触发 | {} | 

                                                                    
                                                                        收藏人数:
                                    
                                                        下载插件并导入HBuilderX
                                                    
                                        赞赏(0)
                                    
                                            
                                            
 下载 2131
                
 赞赏 5
                
            
                    下载 10684740 
                
                        赞赏 1797 
                    
            
            
            
            
            
            
            
            
            
            
            
            
            
            
                        
                                赞赏
                            
            
京公网安备:11010802035340号