ionic2 + cordova 应用-导航

zhaoyongfengz 2017-06-15

5.1 页面跳转隐藏底部tabs(欢迎加入Q群一起学习讨论657185219)

看下面俩种方式跳转(paipai.ts)

import { App,NavController } from 'ionic-angular';
export class PaipaiPage {

  constructor(
    public app: App,
    public navCtrl: NavController) {

  }
this.navCtrl.push(LoginPage, {});//正常跳转
    //this.app.getRootNav().push(LoginPage, {});//隐藏底部的tabs

 5.2 页面跳转页面传值

    paipai.ts 向下个页面传递id

this.navCtrl.push(LoginPage, {"id":5});
    login.ts 获取参数值

   

//引入NavParams
import { NavController,NavParams, ToastController } from 'ionic-angular';
export class LoginPage {
  id : number;
  local: Storage;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private formBuilder: FormBuilder,
    public toastCtrl: ToastController,
    private userInfoService: UserInfoService,
    private storageService: StorageService) {
    //NavParams 取值
    this.id = navParams.get("id");
  }
}

5.2 自定义图标

 5.2.1 打开阿里图标官网


ionic2 + cordova 应用-导航
 

 5.2.2 到库里设置图标(设置俩个颜色)


ionic2 + cordova 应用-导航
 

 5.2.3 项目内设置css


ionic2 + cordova 应用-导航
 
ionic2 + cordova 应用-导航
 IOS要设置俩个css(没试过,参考他人要价格outline后缀的)然后加入图标到tabs.html

<ion-tab [root]="mineRoot" tabTitle="z" tabIcon="zhifubao"></ion-tab>

相关推荐