站长下载:中国新一代站长门户网!

软件提交最近更新热门排行站长论坛

当前位置:首页 > 站长教程 > 小程序教程 > 微信小程序倒计时组件实例

微信小程序倒计时组件实例

时间:2019-01-13人气:208来源:原创我要评论(0)

小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序倒计时组件实例 。

近日, 微信官方对小程序组件进行两个调整,给用户提供更自主的....

下面为大家介绍微信小程序倒计时组件,这一组件主要用来显示小程序中倒计时的效果,下面为开发文档

重构旧代码

在原来的组件中有一个initDuration属性和3个方法,3个方法分别是countDown,format和runCountDown。

initDuration属性

首先我们需要三个page属性来帮助完成接下来的代码,它们的名字和内容如下:

timer: null, // 存储setInterval的IDflag: false, // 倒计时是否结束的标志num: 0 // 过去的秒数复制代码

在initDuration属性的新的回调方法中,我们封装了clearTimer方法,init初始化方法,并且执行倒计时。

initDuration: {  type: Number,  value: 0,  observer: function (newVal) {    if (this.timer) {      this.clearTimer()    }      this.init() // 重置num和flag    this.runCountDown(newVal)  }},复制代码

一定要注意,当传入的属性的值为默认值,例如这里是0时,是不会触发observer回调的。

/** * 初始化函数 */init: function () {  this.flag = false  this.num = 0}/** * 清空计时器 */clearTimer: function () {  clearInterval(this.timer)  this.timer = null}复制代码
countDown方法

countDown方法是接受一个参数为倒计时的秒数,返回一个倒计时的字符串。在这个方法中没有太大改动,只是改动了一些代码格式。如下:

/** * 计算倒计时 * @param {Number} duration - 秒数时间差 * @returns {string} 倒计时的字符串 */countDown: function (duration) {  if (duration <= 0) {    this.setFlag(true) // 将flag属性设为true    return '00:00:00' // 返回默认时间设置  }  let seconds = this._format(duration % 60)  let minutes = Math.floor(duration / 60)  minutes = minutes >= 60 ? this._format(minutes % 60) : this._format(minutes)  let hours = this._format(Math.floor(duration / 3600))  return `${hours}:${minutes}:${seconds}`},复制代码
format方法

format方法的作用很简单,就是处理小于10的数字展示问题。

/** * 格式化小于10的数字 * @param {Number} time - 小于10的数字 * @returns {string} 格式化后的字符串 */format: function (time) {  return time >= 10 ? time : `0${time}`},复制代码
runCountDown方法

runCountDown方法中的改动比较大,在原来的代码中逻辑比较混乱,穿插了许多无关的代码,其实应该将它们封装起来达到解耦的目的。

runCountDown: function (initDuration) {  // 第一次给倒计时赋值 this.setData({ countDownStr })  this.setCountDownTime(this.countDown(initDuration))  // 每一秒更新一次倒计时  this.timer = setInterval(() => {    if (this.flag == true) { // 倒计时结束      clearInterval(this.timer)      return undefined    }    this.addNum() // this.num += 1    this.setCountDownTime(this._countDown(initDuration - this.num))  }, 1000)},复制代码
增加新功能

我们原来的倒计时组件是缺乏一些功能的,例如传入的时间只能是秒数,倒计时结束后只显示00:00:00,如果传入的值是0的话会不进行初始化(这算是Bug了)。所以我们需要加入以下的新功能:

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 高考倒计时锁屏壁纸怎么弄 高考倒计时手机锁屏设置教程

    高考还有多少天?想更方便的了解高考时间,高考剩余时间,可以用一些倒计时软件,而这款高考倒计时手机锁屏软件更是厉害了,打开手机就可以清新明了的掌握高考剩余时间了,也可设置自己喜欢的壁纸,让你的桌面更加有个性,也可更有学习的紧迫感,更高效学习。
  • 抖音生命倒计时怎么拍 抖音生命倒计时视频拍摄攻略

    “生命倒计时”的话题视频最近在抖音里非常火爆,有许多用户想要跟风进行拍摄,但是不清楚具体应该怎么编辑。而下面手机乐园水银师小编就为大家介绍了抖音生命倒计时视频的拍摄方法,帮助你玩转软件。抖音制作生命倒计时视频的步骤:1、其实想要拍摄“生命倒

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号 | 浙公网安备 42011102000245号

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!