mina-countdown

mina-countdown，一个方便、轻量的 小程序 倒计时逻辑库
时间处理逻辑使用tiny-timer库，在此做出声明和感谢

change log：

1. 2021.01.21 init package

支持的事件

主动

• 支持 start 事件
• 支持 pause 事件
• 支持 resume 事件
• 支持 stop 事件

监听

• 支持 tick 事件
• 支持 done 事件
• 支持 statusChanged 事件

demo 展示

1. demo1：快速实现发送验证码倒计时 查看demo代码

2. demo2: 时间结点倒计时 查看demo代码

使用方法

大致可以分为 4 步：

1. npm 安装 mina-countdown，开发工具构建 npm
2. 引入 mina-countdown
3. onload 实例化 mina-countdown
4. wxml 展示倒计时

命令行

npm install mina-countdown
安装完成后，开发工具构建 npm

*.js

import Countdown from 'mina-countdown'; // 1. 引入mina-countdown

Page({
  onLoad: function (options) {
    // 2. onload实例化mina-countdown
    // 会创建this.countdown指向实例对象
    new Countdown(this, 'countdown', {
      // 大多数情况只需要监听 tick 事件，更新 this.data.countdown 即可满足大部分场景
      tick: function (countdown) {
        // 在Countdown倒计时过程中触发，触发事件间隔为1s，参数单位：秒
        this.setData({
          countdown,
        });
      },
    });
  },
  startCountdown: function (duration = 60) {
    this.countdown.start(duration); // 支持传入倒计时时间，单位：秒
  },
});

*.wxml

在 view 上利用 countdown 处理渲染逻辑

简单展示

<text wx:if="{{countdown>0}}"> 倒计时{{countdown}}秒 </text>

<text wx:else> 开始倒计时 </text>

配合 mina-tool 的 wxs 工具 formatCountdown 优化展示

使用 mina-tool,请参看 mina-tool.wxs

<wxs src="mina-tool/wxs/format.wxs" module="format" />
<!-- 00:01:02 -->
<text> {{format.formatCountdown(countdown,'hh:mm:ss')}} </text>
<!-- 01:02 -->
<text>{{format.formatCountdown(countdown,'mm:ss')}}</text>

以上简单几步即可使用 mina-countdown

具体使用请查看Github https://github.com/Yrobot/mina-countdown

如果喜欢mina-countdown的话，记得在github点个 start 哦！🌟🌟🌟