|
1. 什么是倒计时组件倒计时组件主要用于展示促销商品剩余活动时间，到时发送事件提醒等场景。 l 倒计时支持设置天、时、分、秒 l 支持设置文字颜色、背景色，边框宽度、样式、颜色，分隔符颜色、分隔符样式（文字分隔符、冒号分隔符）； l 支持延时触发倒计时； l 支持触发倒计时结束回调事件 倒计时（Countdown）组件结构大致分为两部分，一部分是数字，表示倒计时的天、时、分、秒单位，另一部分是分隔符，用于分隔数字，常见的分隔符为文字分隔符（天、时、分、秒）和冒号分隔符。 
<import name="countdown" src="../Countdown/countdown"></import> <template> <div class="container"> <text>一般用法</text> <div class="example-body"> <countdown class="countdown" day="{{this.day}}" hour="{{this.hour}}" minute="{{this.minute}}" second="{{this.second}}" splitor-color="#007AFF" border-width="{{3}}" border-style="dotted" border-color="#007AFF"></countdown> </div> </div> </template>
2. 实现步骤2.1自定义子组件 倒计时整体外观都是通用的，但是内部具体的样式有区别，在设计的时候，不能直接写死内部样式，否则一旦倒计时的UI有变化，会导致子组件也要修改，违背了对外开源引用的初衷。 所以，子组件countdown.ux中，对外开放多种样式属性方便开发者自定义样式。  2.2子组件设计支持的属性如下： 属性 | 类型 | 默认值 | 描述 | day | Number | 0 | 倒计时的天 | hour | Number | 0 | 倒计时的小时 | minute | Number | 0 | 倒计时的分钟 | second | Number | 0 | 倒计时的秒 | delay | Number | 0 | 倒计时延迟时间 单位：秒 | showDay | Boolean | true | 是否显示天数 | showColon | Boolean | true | 是否以冒号为分隔符 | color | String | #000000 | 文字颜色 | splitorColor | String | #000000 | 分隔符颜色 | backgroundColor | String | #FFFFFF | 文字背景色 | borderWidth | Number | 0 | 文字边框宽度 | borderStyle | String | solid | 文字边框样式 | borderColor | String | #000000 | 文字边框颜色 |
支持的事件： 2.3倒计时实现l 以text组件布局实现，分为两类，一类是显示文字，一类是显示分隔符 l 子组件的props中定义相关属性值，父组件引用时传入属性值，子组件通过this.$watch(‘day‘, ‘changeFlag’)监听值的变化后更新子组件的值并进行处理。 l 倒计时算法：将传入的天、时、分、秒统一换算为秒，设置定时器每过1秒进行递减1，然后重新换算为天、时、分、秒，显示在对应位置上。 
| 
| 图1 text组件显示文字和分隔符 | 图2 子组件props定义属性及监听父组件传值 |
| 图3 传入的天、时、分、秒统一换算为秒 |
| 图4 秒换算回天、时、分、秒 |
l 父组件定义倒计时结束回调事件timeup实现并绑定事件 l 子组件在倒计时结束时触发父组件的timeup事件， this.$emit('timeup') 
| 图5 父组件定义倒计时结束事件并绑定事件 |
| 图6 子组件在满足结束条件时触发父组件的回调 |
3. 总结实现倒计时组件，您可以从中学会如下知识点： l 熟悉快应用子组件的设计和属性定义； l 熟悉父子组件通信； l 熟悉天、时、分、秒的互相转换以及定时器的运用； l 熟悉组件样式的设置。 欲了解更多详情，请参见： 华为快应用官网： https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-animation-styles-0000001123530340
| 
