ionic2 + cordova page operation control

3.1 Style adjustment

    contact.html 

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <!--Add red style-->
    <ion-list-header class="red">Follow us on Twitter</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-left></ion-icon>
      @ionicframework
    </ion-item>
  </ion-list>
</ion-content>

       contact.scss 

$red-color : red;
page-contact {
  .red {
    color:  $red-color;
  }
}

 3.2 Add tab page

 3.2.1 paipai.html

<ion-header>
  <ion-navbar>
    <ion-title>
      my pat
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>User Information</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-left></ion-icon>
      I am Xiaobai
    </ion-item>
  </ion-list>
<!--Button Jump-->
  <button ion-button full (click)="goToLogin()">登录</button>

</ion-content>

 

 3.2.2 paipai.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
//Introduce the login page
import {LoginPage} from '../login/login';

@Component({
  selector: 'page-paipai',
  templateUrl: 'paipai.html'
})
export class PaipaiPage {

  constructor(public navCtrl: NavController) {

  }

  //Jump to the login page
  goToLogin () {
    //navCtrl jump
    this.navCtrl.push(LoginPage, {});
  }
}

 

3.2.3 Introduce PaipaiPage in app.module.ts (previously)

 

3.2.4 Add tabs.ts to PaipaiPage

 

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
//Import the new page
import {PaipaiPage} from '../paipai/paipai';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = PaipaiPage;//Bind new page
  constructor() {

  }
}

 

 

3.2.4 tabs.html join tab4Root 

 

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  <!--Add new page-->
  <ion-tab [root]="tab4Root" tabTitle="Paipai" tabIcon="contacts"></ion-tab>
</ion-tabs>

 

 

3.2.4 Learn about specific applications, lists, http, forms, etc.