UDN-企业互联网技术人气社区

板块导航

浏览  : 6817
回复  : 0

[前端] 微信小程序定时器组件(输入时间字符串即可倒计时)

[复制链接]
芭芭拉的头像 楼主
  写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性。

  代码在这里

  github下载地址

  用法:
  1. var timer = require('../../plugins/wxTimer.js');
复制代码

  最简单的调用方式:
  1. timer.wxTimer.call(this);
复制代码

  其他参数:

  1、beginTime    需要倒计时的时间,比如:"01:11:12",默认值为"00:00:00"

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

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

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

  注意:使用此组件,会在page的data中创建一个名为wxTimer的key,如果需要在wxml中引用倒计时的数据直接{{wxTimer}}即可

  小程序中用法示例:

  js部分:
  1. var wxTimer = require('../../plugins/wxTimer.js');
  2. Page({
  3.   data: {
  4.   },
  5.   onLoad: function () {
  6.     wxTimer.wxTimer.call(this,"00:10:01",function(){
  7.         console.log("完成");
  8.     },5,function(){
  9.       var that = this;
  10.       wx.getLocation({
  11.         type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  12.         success: function(res) {
  13.           that.setData({
  14.             latitude : res.latitude,
  15.             longitude : res.longitude,
  16.           })
  17.         }
  18.       })
  19.     }.bind(this));
  20.   }
  21. })
复制代码

  wxml部分:
  1. <text>{{wxTimer}}</text>
复制代码

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

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部