专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
下面为大家介绍微信小程序倒计时组件,这一组件主要用来显示小程序中倒计时的效果,下面为开发文档
在原来的组件中有一个initDuration属性和3个方法,3个方法分别是countDown,format和runCountDown。
首先我们需要三个page属性来帮助完成接下来的代码,它们的名字和内容如下:
timer: null, // 存储setInterval的ID flag: 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方法是接受一个参数为倒计时的秒数,返回一个倒计时的字符串。在这个方法中没有太大改动,只是改动了一些代码格式。如下:
/** * 计算倒计时 * @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方法的作用很简单,就是处理小于10的数字展示问题。
/** * 格式化小于10的数字 * @param {Number} time - 小于10的数字 * @returns {string} 格式化后的字符串 */ format: function (time) { return time >= 10 ? time : `0${time}` }, 复制代码
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了)。所以我们需要加入以下的新功能:
在倒计时组件中,展示倒计时字符串的是this.data.countDownTime属性。所以在结束时将countDownTime属性的值设为传入的字符串即可。 首先,封装一个赋值方法
setEndContent: function (countDownTime) { if (countDownTime) { this.setData({ countDownTime }) } } 复制代码
接下来为组件新增加一个属性为 endContent 。
endContent: { type: String, value: '00:00:00' } 复制代码
接下来,在倒计时结束的位置,调用我们的赋值方法,也就是runCountDown方法的计时器回调函数中。
this.timer = setInterval(() => { if (this.flag == true) { clearInterval(this.timer) this.setEndContent(this.properties.endContent) // 设置结束字符串 return undefined } this.addNum() this.setCountDownTime(this._countDown(initDuration - this.num)) }, 1000) 复制代码
这样自定义字符串就成功了,在使用组件时传入默认值即可。
这个问题的出现是因为当传入属性为默认值时,不会调用observer回调函数,所以这时我们需要使用组件的 attached 生命周期函数。
attached: function () { if (this.properties.initDuration <= 0) { // 如果传入值为零时不会调用observer回调,则直接从这里展示倒计时结束 this.setEndContent(this.properties.endContent) } } 复制代码
为了简洁起见,我们就不为组件增加新的属性了,依然使用initDuration属性,所以要将其type从Number改为null(小程序的这点不够强,不能选择多类型。)。在修改type后我们需要封装一个将UTC时间字符串解析成倒计时秒数的方法。
parseDate: function (date) { if (typeof date == 'string') { // 将传进来的时间减去现在的时间,得到的结果便和直接传进数字值相同 return Math.floor((+new Date(date) / 1000)) - Math.floor((+new Date / 1000)) } return date } 复制代码
在observer回调中调用时如下:
initDuration: { type: null, observer: function (newVal) { if (this.timer) { this._clearTimer() } this._init() this._runCountDown(this.parseDate(newVal)) // 在这里调用parseData方法 } } 复制代码
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...
星巴克的线上线下营销策略 星巴克作为全球知名的咖啡连锁品牌,一直在线上线下营销领域走在前列。以下是星巴克如何通...
在数字化时代,线上线下相结合的营销模式已成为零售行业的新常态,它通过整合线上电商平台和线下实体店铺的资源,为消...