倒计时 Countdown

计时组件,可用于验证码、音频播放计时等场景

目标时间

通过time设置目标时间,默认值为当前日期的后一天,time值格式默认为日期,通过time-type属性修改time属性值的格式,可选值为datetimesecond,默认为datetime

示例代码

1 基本用法

time-type='datetime'时,time值格式为日期,且需要大于当前日期,如果小于当前日期,组件不会开始工作;

倒计时 Countdown - 图1

  1. <l-countdown />
  2. <l-countdown time="2018-11-09 00:00"/>

2 修改time-typesecond

time-type='second'时,time属性接收一个整数,单位为秒,若传入的值小于 0 时,则会从 0 开始,目标时间为time的绝对值;若传入的值大于 0,则会从time值开始,到 0 结束。

倒计时 Countdown - 图2

  1. <l-countdown time-type="second" time="1500" />
  2. <l-countdown time-type="second" time="-1500" />

自定义显示日期模板

通过format定义时间显示的格式,默认为{%d}天{%h}时{%m}分{%s}秒

示例代码

倒计时 Countdown - 图3

  1. <l-countdown time-type="second" time="60" format="{%s}秒"/>
  2. <l-countdown time-type="second" time="1500" format="{%m}:{%s}"/>
  3. <l-countdown time-type="second" time="3690" format="{%h}:{%m}:{%s}"/>
  4. <l-countdown time-type="second" time="-1500" />

自定义样式

通过l-class修改倒计时组件整体样式,通过l-class-time修改倒计时组件中数字区域的样式

示例代码

倒计时 Countdown - 图4

  1. <l-countdown l-class-time="countdown-blue" time="1500" time-type="second" l-class="countdown-text"/>
  1. .content .countdown-blue {
  2. width: 52rpx ;
  3. height: 52rpx;
  4. border: 2rpx solid #3683D6;
  5. border-radius: 50%;
  6. background:transparent;
  7. color: #3683D6;
  8. }
  9. .content .countdown-text {
  10. color: #3683D6;
  11. }

停止计时器

通过status属性切换倒计时组件的计时状态,默认为true,表示计时器处于计时状态

纪念日模式

设置countdownType="anniversary"开启纪念日模式计时,此时计时器会计算距离设定的时间已经过去多久。可选值目前只有anniversarynormal,默认是normal

  1. <l-countdown time="2019-04-24" countdownType="anniversary" />

此时

  • time-type必须是datetime

倒计时 (Countdown Attributes)

参数说明类型可选值默认值
time目标时间String日期或者秒数当前日期的后一天
time-type输入时间的格式Stringdatetimeseconddatetime
status倒计时的计时状态Boolean-true
format自定义显示时间格式String-{%d}天{%h}时{%m}分{%s}秒
is-zero-padd一位数值时,是否自动补零Boolean-true

倒计时外部样式类(Countdown ExternalClasses)

外部样式类名说明备注
l-class修改倒计时组件的样式-
l-time-class修改数字区域的样式替代l-class-time

已经弃用的外部样式类

以下这些外部样式类已经停止支持,将在未来的某个版本中去除,请使用上方的外部样式类替代

外部样式类名说明备注
l-class-time修改数字区域的样式请使用l-time-class替代

倒计时 (Countdown Events)

事件名称说明返回值备注
bind:linend倒计时结束后的事件--

行为属性 (Behavior Attributes)

参数说明类型可选值默认值
time目标时间String日期或者秒数当前日期的后一天
time-type输入时间的格式Stringdatetime/seconddatetime
status倒计时的计时状态Boolean-true
format自定义显示时间格式String-{%d}天{%h}时{%m}分{%s}秒
is-zero-padd一位数值时,是否自动补零Boolean-true

行为事件 (Behavior Events)

事件名称说明返回值备注
bind:linend倒计时结束后的事件--

拓展

我们将倒计时组件的部分属性和方法写在了behaviors文件中,你还可以直接引用behavior到你自己的组件中。具体使用方法参考小程序 behaviors倒计时 Countdown - 图5