前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ionic2-页面的生命周期 原

ionic2-页面的生命周期 原

作者头像
tianyawhl
发布2019-04-04 16:40:36
4150
发布2019-04-04 16:40:36
举报
文章被收录于专栏:前端之攻略

onPageLoaded   onPageWillEnter  onPageDidEnter   onPageWillLeave   onPageDidLeave ionViewLoaded  ionViewWillEnter ionViewDidEnter  ionViewWillLeave  ionViewDidLeave

 上下2种写法在beta37中都有效

假如在about页面中的控制台中打印页面加载完成,将要进入,已经进入,将要离开,已经离开

在about.ts文件夹中

代码语言:javascript
复制
export class AboutPage {
ionViewLoaded(){
  console.log("about loaded lo")
  }
  onPageWillEnter(){
  console.log("about will endter")
  }
    onPageDidEnter(){
  console.log("about did endter")
  }
   onPageWillLeave(){
  console.log("about will Leave")
  }
  onPageDidLeave(){
  console.log("about did Leave")
  }
}

下面的例子为默认第二个tab显示

代码语言:javascript
复制
<ion-tabs #myTabs>
	<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
	<ion-tab [root]="tab2Root" tabTitle="关于" tabIcon="information-circle"></ion-tab>
	<ion-tab [root]="tab3Root" tabTitle="用户中心" tabIcon="person"></ion-tab>
</ion-tabs>

html页面中直接写#myTabs 代表id号,不要写id="myTabs"

代码语言:javascript
复制
import {Component} from '@angular/core';
import {HomePage} from '../home/home';
import {AboutPage} from '../about/about';
import {ContactPage} from '../contact/contact';
import {Tabs} from 'ionic-angular';
import {Injectable,ViewChild} from '@angular/core';

@Component({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef:Tabs;
  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;

  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = ContactPage;
  }
  ionViewDidEnter(){
    this.tabRef.select(1);
  }
}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/09/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档