评论

快速实现验证码发送倒计时 - mina-countdown

小程序快速实现验证码发送倒计时 - mina-countdown

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 哦!🌟🌟🌟

最后一次编辑于  2021-02-18  
点赞 0
收藏
评论
登录 后发表内容