JSPM

mina-countdown

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q19556F
  • License ISC

一个轻量、方便的小程序 倒计时 逻辑处理库

Package Exports

  • mina-countdown

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mina-countdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mina-countdown

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

change log:

  1. 2021.01.21 init package

支持的事件

主动

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

监听

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

demo 展示

  1. demo1:监听 pressMove 拖拽 手势

使用方法

大致可以分为 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,参数单位:秒
        console.log('countdown:' + countdown);
        // 更新 data.countdown 做渲染使用
        this.setData({
          countdown,
        });
      },
      done: function () {
        //在Countdown倒计时结束时触发
        console.log('done');
      },
      statusChanged: function (status) {
        //在Countdown状态改变时触发,status代表下一步的状态 'running' | 'paused' | 'stopped'
        console.log('status:' + status);
      },
    });
  },
  startCountdown: function (duration = 60) {
    this.countdown.start(duration); // 支持传入倒计时时间,单位:秒
  },
  pauseCountdown: function () {
    this.countdown.pause();
  },
  resumeCountdown: function () {
    this.countdown.resume();
  },
  stopCountdown: function () {
    this.countdown.stop();
  },
});

*.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" />

<text> {{format.formatCountdown(countdown)}} </text>

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