微信小程序定时器组件(输入时间字符串即可倒计时)
昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了。代码放在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截图软件,所以效果图就只有静态图了。
微信小程序定时器组件(输入时间字符串即可倒计时)的更多相关文章
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 微信小程序_(组件)可拖动movable-view
微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...
- 微信小程序_(组件)view视图容器
微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 微信小程序UI组件库 iView Weapp快速上手
概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...
随机推荐
- SQL Server镜像自动生成脚本
SQL Server镜像自动生成脚本 镜像的搭建非常繁琐,花了一点时间写了这个脚本,方便大家搭建镜像 执行完这个镜像脚本之后,最好在每台机器都绑定一下hosts文件,不然的话,镜像可能会不work 1 ...
- Connect() 2016 大会的主题 ---微软大法好
文章首发于微信公众号"dotnet跨平台",欢迎关注,可以扫页面左面的二维码. 今年 Connect 大会的主题是 Big possibilities. Bold technolo ...
- C# 发送邮件 附件名称为空
示例代码: // 1.创建邮件 MailMessage mailMsg = new MailMessage(); mailMsg.To.Add(new MailAddress("test@ ...
- TYPESDK手游聚合SDK服务端设计思路与架构之二:服务端设计
在前一篇文中,我们对一个聚合SDK服务端所需要实现的功能作了简单的分析.通过两个主要场景的功能流程图,我们可以看到,作为多款游戏要适配多个渠道的统一请求转发中心,TYPESDK服务端主要需要实现的功能 ...
- Asp.NET + SQLServer 部署注意事项
1. 内存设置最大值(如果不设置, 会造成内存占用太大,带来性能问题) IIS 设置最大内存 sqlserver 设置最大内存
- centos tomcat安装
官网http://tomcat.apache.org/download-70.cgi下载zip的文件unzip apache-tomcat-7.0.54.zipmv apache-tomcat-7.0 ...
- BZOJ 1692: [Usaco2007 Dec]队列变换 [后缀数组 贪心]
1692: [Usaco2007 Dec]队列变换 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1383 Solved: 582[Submit][St ...
- 转: 如何高效利用GitHub
注:写了很多使用哲学,有意思 from: http://www.yangzhiping.com/tech/github.html
- DoraCMS 源码知识点备注
项目需要研究了下DoraCMS这款开源CMS,真心做的不错:).用的框架是常用的express 4 + mongoose,代码也很规范,值得学习. 源码中一些涉及到的小知识点备注下: https:// ...
- 从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能
前言 之前在 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记 这篇随笔中介绍了一下 UWP 淘宝的“比较”新功能呱呱坠地的过程.在鲜活的文字背后,其实都是程序员不眠不休的血泪史(有血有泪有史) ...