ionic2 + cordova 页面操作控制

3.1 样式调整

    contact.html 

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

<ion-content>
  <ion-list>
    <!--添加red样式-->
    <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 添加tab页

 3.2.1 paipai.html

<ion-header>
  <ion-navbar>
    <ion-title>
      我的拍拍
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>用户信息</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-left></ion-icon>
      我是小白
    </ion-item>
  </ion-list>
<!--按钮跳转-->
  <button ion-button full (click)="goToLogin()">登录</button>

</ion-content>

 

 3.2.2 paipai.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
//引进登录页
import {LoginPage} from '../login/login';

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

  constructor(public navCtrl: NavController) {

  }

  //跳转到登录页
  goToLogin () {
    //navCtrl 跳转
    this.navCtrl.push(LoginPage, {});
  }
}

 

3.2.3 在app.module.ts引入PaipaiPage（前文有）

 

3.2.4 tabs.ts 加入 PaipaiPage

 

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

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
//导入新增页面
import {PaipaiPage} from '../paipai/paipai';

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

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = PaipaiPage;//绑定新页面
  constructor() {

  }
}

 

 

3.2.4 tabs.html 加入 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>
  <!--加入新页面-->
  <ion-tab [root]="tab4Root" tabTitle="Paipai" tabIcon="contacts"></ion-tab>
</ion-tabs>

 

 

3.2.4 下面学习具体的应用，列表，http,表单等