昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了。代码放在github上了。

昨天的代码在这里

github下载地址

功能:

1、最基础的当然就是倒计时功能了。

2、可以设置倒计时结束后执行的事件。

3、可以设置倒计时执行过程中每隔多少秒,执行一次对应的事件。

用法:

引入:

var timer = require('../../plugins/wxTimer.js');

最简单的调用方式:

var wxTimer = new timer({
  beginTime:"00:00:10"
})
wxTimer.start(this);
wxTimer.stop();

倒计时结束后执行事件

var wxTimer = new timer({
beginTime:"00:00:10",
complete:function(){
console.log("完成了")
}
})
wxTimer.start(this);
wxTimer.stop();

间隔执行事件

var wxTimer = new timer({
beginTime:"00:00:10",
complete:function(){
console.log("完成了")
},
interval:2,
intervalFn:function(){
console.log("过去了2秒");
}
})

说明:

1、由于内部需要调用到小程序的setData方法,所以我们需要把this传过去。

2、此方法会在page中生成一个名为wxTimer和wxTimerSecond的data,分别是倒计时的 时/分/秒 版本和倒计时的纯秒数版本,如果需要在wxml中引用倒计时的数据直接{{wxTimer}}或者{{wxTimerSecond}}即可

其他参数:

1、beginTime    需要倒计时的时间,比如:"01:11:12",默认值为"00:00:00",也可以省略秒数,如:"01:10"

2、complete                倒计时归零0时的回调函数,即为beginTime = "00:00:00"则立即调用

3、interval        倒计时的过程中,规定每隔几秒执行一次intervalFn,如果为0则永远不会执行,默认为1

4、intervalFn    每隔interval秒执行一次的函数。

效果图:

因为没有gif截图软件,所以效果图就只有静态图了。

微信小程序定时器组件(输入时间字符串即可倒计时)的更多相关文章

  1. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  2. 微信小程序_(组件)可拖动movable-view

    微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...

  3. 微信小程序_(组件)view视图容器

    微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...

  4. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  5. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  6. 5个最优秀的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  7. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  8. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  9. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

随机推荐

  1. SQL Server镜像自动生成脚本

    SQL Server镜像自动生成脚本 镜像的搭建非常繁琐,花了一点时间写了这个脚本,方便大家搭建镜像 执行完这个镜像脚本之后,最好在每台机器都绑定一下hosts文件,不然的话,镜像可能会不work 1 ...

  2. Connect() 2016 大会的主题 ---微软大法好

    文章首发于微信公众号"dotnet跨平台",欢迎关注,可以扫页面左面的二维码. 今年 Connect 大会的主题是 Big possibilities. Bold technolo ...

  3. C# 发送邮件 附件名称为空

     示例代码: // 1.创建邮件 MailMessage mailMsg = new MailMessage(); mailMsg.To.Add(new MailAddress("test@ ...

  4. TYPESDK手游聚合SDK服务端设计思路与架构之二:服务端设计

    在前一篇文中,我们对一个聚合SDK服务端所需要实现的功能作了简单的分析.通过两个主要场景的功能流程图,我们可以看到,作为多款游戏要适配多个渠道的统一请求转发中心,TYPESDK服务端主要需要实现的功能 ...

  5. Asp.NET + SQLServer 部署注意事项

    1. 内存设置最大值(如果不设置, 会造成内存占用太大,带来性能问题) IIS 设置最大内存 sqlserver 设置最大内存

  6. centos tomcat安装

    官网http://tomcat.apache.org/download-70.cgi下载zip的文件unzip apache-tomcat-7.0.54.zipmv apache-tomcat-7.0 ...

  7. BZOJ 1692: [Usaco2007 Dec]队列变换 [后缀数组 贪心]

    1692: [Usaco2007 Dec]队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1383  Solved: 582[Submit][St ...

  8. 转: 如何高效利用GitHub

    注:写了很多使用哲学,有意思 from: http://www.yangzhiping.com/tech/github.html

  9. DoraCMS 源码知识点备注

    项目需要研究了下DoraCMS这款开源CMS,真心做的不错:).用的框架是常用的express 4 + mongoose,代码也很规范,值得学习. 源码中一些涉及到的小知识点备注下: https:// ...

  10. 从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能

    前言 之前在 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记 这篇随笔中介绍了一下 UWP 淘宝的“比较”新功能呱呱坠地的过程.在鲜活的文字背后,其实都是程序员不眠不休的血泪史(有血有泪有史) ...