CountDown 倒计时

用于展现倒计时。

使用指南

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">CountDown</view>
  4. <view class="page__desc">倒计时</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="weui-cells weui-cells_after-title">
  8. <view class="weui-cell weui-cell_input weui-cell_vcode">
  9. <view class="weui-cell__hd">
  10. <view class="weui-label">手机号</view>
  11. </view>
  12. <view class="weui-cell__bd">
  13. <input class="weui-input" placeholder="请输入手机号" />
  14. </view>
  15. <view class="weui-cell__ft">
  16. <view class="weui-vcode-btn" bindtap="vcode">{{ c2 || '获取验证码' }}</view>
  17. </view>
  18. </view>
  19. </view>
  20. <view class="text-center">
  21. <view class="countdown">{{ c1 }}</view>
  22. <view class="countdown">{{ c3 }}</view>
  23. </view>
  24. <view class="weui-btn-area text-center">
  25. <button type="primary" size="mini" bindtap="stop">Stop</button>
  26. <button type="primary" size="mini" bindtap="start">Start</button>
  27. <button type="primary" size="mini" bindtap="update">Update</button>
  28. </view>
  29. </view>
  30. </view>
  1. import { $wuxCountDown } from '../../dist/index'
  2. Page({
  3. data: {},
  4. onLoad() {
  5. this.c1 = new $wuxCountDown({
  6. date: 'June 7, 2087 15:03:25',
  7. render(date) {
  8. const years = this.leadingZeros(date.years, 4) + ' 年 '
  9. const days = this.leadingZeros(date.days, 3) + ' 天 '
  10. const hours = this.leadingZeros(date.hours, 2) + ' 时 '
  11. const min = this.leadingZeros(date.min, 2) + ' 分 '
  12. const sec = this.leadingZeros(date.sec, 2) + ' 秒 '
  13. this.setData({
  14. c1: years + days + hours + min + sec,
  15. })
  16. },
  17. })
  18. this.c3 = new $wuxCountDown({
  19. date: +(new Date) + 60000 * 20,
  20. render(date) {
  21. const min = this.leadingZeros(date.min, 2) + ' 分 '
  22. const sec = this.leadingZeros(date.sec, 2) + ' 秒 '
  23. this.setData({
  24. c3: min + sec,
  25. })
  26. },
  27. })
  28. },
  29. vcode() {
  30. if (this.c2 && this.c2.interval) return !1
  31. this.c2 = new $wuxCountDown({
  32. date: +(new Date) + 60000,
  33. onEnd() {
  34. this.setData({
  35. c2: '重新获取验证码',
  36. })
  37. },
  38. render(date) {
  39. const sec = this.leadingZeros(date.sec, 2) + ' 秒 '
  40. date.sec !== 0 && this.setData({
  41. c2: sec,
  42. })
  43. },
  44. })
  45. },
  46. stop() {
  47. this.c3.stop()
  48. },
  49. start() {
  50. this.c3.start()
  51. },
  52. update() {
  53. this.c3.update(+(new Date) + 60000 * 30)
  54. },
  55. })

视频演示

CountDown

API

参数 类型 描述 默认值
options object 配置项 -
options.date string 日期 June 7, 2087 15:03:25
options.refresh number 刷新时间 1000
options.offset number 偏移量 0
options.onEnd function 倒计时结束后的回调函数 -
options.render function 渲染组件的回调函数 -