一 什么是组件所在页面的生命周期
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期。
例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 RGB 颜色值。
在自定义组件中,组件所在页面的生命周期函数有如下 3 个。
二 pageLifetimes 节点
组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中。
Component({
pageLifetimes: {
show() { // 页面被展示时执行
console.log('show')
this._randomColor()
},
hide() { // 页面被隐藏时执行
console.log('hide')
},
resize() { // 页面尺寸变化时执行
console.log('resize')
}
}
})
三 小案例——生成随机的 RGB 颜色值
Component({
methods:{
// 生成随机 RGB 颜色的方法。非事件处理函数建议以 _ 开头
_randomColor() {
this.setData({ // 为 data 里面的 _egb 纯数据字段重新赋值
_rgb: {
r: Math.floor(Math.random() * 256),
g: Math.floor(Math.random() * 256),
b: Math.floor(Math.random() * 256)
}
})
}
}
pageLifetimes: {
// 组件所在页面被展示时,立即调研 _randomColor 生成随机颜色值
show() {
console.log('show')
this._randomColor()
}
}
})