倒计时功能实现:微信小程序实现倒计时功能(超简单)_洛潆的博客-CSDN博客_微信小程序倒计时功能
由于要在多个页面使用倒计时功能,在每个页面都重新写一遍就会很麻烦,所以可以把它封装为自定义组件,最终效果如下:
步骤:
在项目根目录下创建component文件夹,在内部创建topbar文件夹,右键新建Component
打开topbar.js文件,在properties节点下声明总时长和当前剩余时长
properties: {
time:{
type:Number,
value:1800
},
countdown:String
},
properties节点下的值都可由组件使用者传入,type表示变量类型,value表示变量默认值,没有默认值可以使用简化写法,即变量名:变量类型
在methods节点下定义倒计时函数
methods: {
countdown(){
var minute=Math.floor(this.properties.time / 60 );
var second=this.properties.time % 60
second<10?second='0'+second:'';
this.setData({
countdown:minute+':'+second,
time:this.properties.time-1
})
}
},
在data平级节点下创建lifetimes节点(组件的生命周期函数),使用定时器每隔一秒执行一次
lifetimes:{
attached(){
setInterval(() => {
this.countdown()
}, 1000)},
},
组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中,最重要的生命周期是
created
attached
detached
,包含一个组件实例生命流程的最主要时间点。
- 组件实例刚刚被创建好时,
created
生命周期被触发。此时,组件数据this.data
就是在Component
构造器中定义的数据data
。 此时还不能调用setData
。 通常情况下,这个生命周期只应该用于给组件this
添加一些自定义属性字段。- 在组件完全初始化完毕、进入页面节点树后,
attached
生命周期被触发。此时,this.data
已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。- 在组件离开页面节点树后,
detached
生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则detached
会被触发。
注意:组件内的定时器只能使用setInterval(() => {}, interval)格式,而不能使用
setInterval(function, interval)格式
topbar.wxml:
<view>{{countdown}}</view>
在app.json文件下引入组件 ,组件名可自定义
"usingComponents": {
"topbar":"/component/topbar/topbar",
},
接下来就可以在其他页面使用了,格式为:
<topbar time='1800'></topbar>
<!-- time自定义 -->