CountDown 倒计时

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-count-down": "../../dist/count-down/index"
  3. }

示例

  1. <view class="view-wrap">
  2.     <text class="type-title">倒计时：</text>
  3.     <i-count-down
  4.             target="{{targetTime}}"
  5.             clear-timer="{{clearTimer}}"
  6.     ></i-count-down>
  7. </view>
  9. <view class="view-wrap">
  10.     <text class="type-title">显示天的倒计时：</text>
  11.     <i-count-down
  12.             target="{{targetTime1}}"
  13.             show-day="{{true}}"
  14.             clear-timer="{{clearTimer}}"
  15.     ></i-count-down>
  16. </view>
  19. <view class="view-wrap">
  20.     <text class="type-title">自定义格式倒计时：</text>
  21.     <i-count-down
  22.             target="{{targetTime}}"
  23.             format="{{myFormat}}"
  24.             clear-timer="{{clearTimer}}"
  25.     ></i-count-down>
  26. </view>
  28. <view class="view-wrap">
  29.     <text class="type-title">自定义格式倒计时：</text>
  30.     <i-count-down
  31.             target="{{targetTime1}}"
  32.             show-day="{{true}}"
  33.             format="{{myFormat1}}"
  34.             clear-timer="{{clearTimer}}"
  35.     ></i-count-down>
  36. </view>
  38. <view class="view-wrap">
  39.     <text class="type-title">执行回调的倒计时：</text>
  40.     <i-count-down
  41.             target="{{targetTime2}}"
  42.             bindcallback="myLinsterner"
  43.             clear-timer="{{clearTimer}}"
  44.     ></i-count-down>
  45.     <text>倒计时状态：{{status}}</text>
  46. </view>
  49. <view class="view-wrap">
  50.     <text class="type-title">修改倒计时样式：</text>
  51.     <i-count-down
  52.             target="{{targetTime}}"
  53.             countdown-class="big"
  54.             clear-timer="{{clearTimer}}"
  55.     ></i-count-down>
  56. </view>
  1. Page({
  2.     data: {
  3.         targetTime: 0,
  4.         targetTime1: 0,
  5.         myFormat: ['时', '分', '秒'],
  6.         myFormat1: ['天', '时', '分', '秒'],
  7.         status: '进行中...',
  8.         clearTimer: false
  9.     },
  10.     onLoad() {
  11.         this.setData({
  12.             targetTime: new Date().getTime() + 6430000,
  13.             targetTime1: new Date().getTime() + 86430000,
  14.             targetTime2: new Date().getTime() + 10000
  15.         });
  16.     },
  17.     onUnload() {
  18.         this.setData({
  19.             clearTimer: true
  20.         });
  21.     },
  22.     myLinsterner(e) {
  23.         this.setData({
  24.             status: '结束'
  25.         });
  26.     }
  27. });

API

CountDown properties

属性说明类型默认值
i-class自定义 class 类名String-
target目标时间Number-
show-day是否显示天数Booleanfalse
format时间格式化显示String-
clear-timer是否停止计时Booleanfalse

CountDown events

事件名说明返回值
bind:callback倒计时结束回调-