mip-date-countdown 组件

倒计时组件

mip-date-countdown 组件用于在 MIP 页面中显示倒计时的信息。只需要在组件的标签上配置特定的时间属性，组件将会计算出一系列的时间值，配合 mip-mustache 组件，就可以把这些值按照特定的形式渲染出来。如下示例：

示例

1
2
3
4
5
6
7
<mip-date-countdown end-date="2020-06-01T00:00:00+08:00">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

将显示为：

1
591 天, 08 小时, 10 分钟, 58 秒

时间格式

属性

用来指定目标时间的参数：end-date, timestamp-ms, timestamp-seconds，timeleft-ms, 至少需要其中一个。

end-date

ISO 格式的时间，如 2020-06-01T00:00:00+08:00

timestamp-ms

目标时间戳（ms），如 1590940800000

timestamp-seconds

目标时间戳（s），如 1590940800

timeleft-ms

剩余时间（ms），如 3600000

offset-seconds (可选)

距离目标时间的时间偏移量（s），可以是正数或负数，如 offset-seconds="60" 表示将目标时间增加 60 秒

biggest-unit (可选)

设置倒计时的最大时间单位，默认值 days。如倒计时时间是 10 天 10 小时 20 分钟，若设置 biggest-unit="hours"，则时间显示为：250 小时 20 分钟

可选值：days，hours，minutes，seconds 默认值：days

when-ended (可选)

用于设置倒计时结束（0天0时0分0秒）时，是否停止计时器。默认值 stop。设置成 continue 时，0 秒后会继续执行倒计时。注意：使用 timeout 事件时，必须将 when-ended 置为 stop。

locale (可选)

设置时间单位显示的语言，默认值 zh-cn（简体中文）

事件

如下示例，30秒倒计时结束时，组件将触发 timeout 事件，下方的段落文字将自动替换为“时间到了”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<mip-data>
      <script type="application/json">
        {
          "status": "倒计时进行中..."
        }
      </script>
  </mip-data>

  <mip-date-countdown timeleft-ms="30000" when-ended="stop" on="timeout:MIP.setData({status:'时间到了'})">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

  <p m-text="status"></p>

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!-- end-date -->
  <h2>end-date</h2>
  <mip-date-countdown end-date="2020-06-01T00:00:00+08:00">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

  <!-- timestamp-ms -->
  <h2>timestamp-ms</h2>
  <mip-date-countdown timestamp-ms="1590940800000">
    <template type="mip-mustache">
      <div>
        {{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}}, {{s}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

  <!-- timestamp-seconds -->
  <h2>timestamp-seconds</h2>
  <mip-date-countdown timestamp-seconds="1590940800">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

  <!-- timeleft-ms -->
  <h2>timeleft-ms</h2>
  <mip-date-countdown timeleft-ms="3600000">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

  <!-- offset-seconds -->
  <h2>offset-seconds</h2>
  <mip-date-countdown timeleft-ms="3600000" offset-seconds="-60">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

  <!-- locale -->
  <h2>locale</h2>
  <mip-date-countdown end-date="2020-06-01T00:00:00+08:00" locale="en">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>
  <mip-date-countdown end-date="2020-06-01T00:00:00+08:00" locale="ko">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>
  <mip-date-countdown end-date="2020-06-01T00:00:00+08:00" locale="th">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>
  <mip-date-countdown end-date="2020-06-01T00:00:00+08:00" locale="zh-tw">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>

  <!-- biggest-unit -->
  <h2>biggest-unit</h2>
  <mip-date-countdown end-date="2020-06-01T00:00:00+08:00" biggest-unit="hours">
    <template type="mip-mustache">
      <div>
        {{dd}} {{days}}, {{hh}} {{hours}}, {{mm}} {{minutes}}, {{ss}} {{seconds}}
      </div>
    </template>
  </mip-date-countdown>