ionic 页面的生命周期
// 第一页面的代码
constructor(public navCtrl: NavController, public navParams: NavParams) {
console.log("页面:第一页:constructor>>1.1、初始化数据,页面未创建");
}
ionViewCanEnter(){
console.log("页面:第一页:ionViewCanEnter>>1.2、页面初始化结束,可以加载");
}
ionViewDidLoad() {
console.log("页面:第一页:ionViewDidLoad>>1.3、页面加载完成");
}
ionViewWillEnter(){
console.log("页面:第一页:ionViewWillEnter>>1.4、页面将要显现");
}
ionViewDidEnter(){
console.log("页面:第一页:ionViewDidEnter>>1.5、页面显现完成");
}
ionViewCanLeave(){
console.log("页面:第一页:ionViewCanLeave>>1.6、页面已准备离开,开始加载下一页面");
}
ionViewWillLeave(){
console.log("页面:第一页:ionViewWillLeave>>1.7、下一页面已创建完成,页面将要离开");
}
ionViewDidLeave(){
console.log("页面:第一页:ionViewDidLeave>>1.8、页面离开");
}
ionViewWillUnload(){
console.log("页面:第一页:ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
}
purchaseInfoInputNextBtnClick(){
console.log(">>>点击跳转至第二页面");
this.navCtrl.push("PurchaseInfoConfirmPage");
}
// 第二页面的代码
@ViewChild(Navbar) navBar: Navbar;
constructor(public navCtrl: NavController, public navParams: NavParams) {
console.log("页面:第二页:constructor>>2.1、页面开始初始化");
}
ionViewCanEnter(){
console.log("页面:第二页:ionViewCanEnter>>2.2、页面初始化结束,可以加载");
}
ionViewDidLoad() {
// 处理页面的返回按钮点击事件
this.navBar.backButtonClick = this.backButtonClick;
console.log("页面:第二页:ionViewDidLoad>>2.3、页面加载完成");
}
backButtonClick = (e: UIEvent) => {
console.log(">>>点击返回第一页");
this.navCtrl.pop();
};
ionViewWillEnter(){
console.log("页面:第二页:ionViewWillEnter>>2.4、页面将要显现");
}
ionViewDidEnter(){
console.log("页面:第二页:ionViewDidEnter>>2.5、页面显现完成");
}
ionViewCanLeave(){
console.log("页面:第二页:ionViewCanLeave>>2.6、页面已准备离开,开始加载下一页面");
}
ionViewWillLeave(){
console.log("页面:第二页:ionViewWillLeave>>2.7、下一页面已创建完成,页面将要离开");
}
ionViewDidLeave(){
console.log("页面:第二页:ionViewDidLeave>>2.8、页面离开");
}
ionViewWillUnload(){
console.log("页面:第二页:ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
}
页面运行结果如下: