ionic2 + cordova 应用-导航

阅读更多

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 应用-导航_第1张图片
 

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



 

 5.2.3 项目内设置css


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

 

 

  • ionic2 + cordova 应用-导航_第4张图片
  • 大小: 18.2 KB
  • ionic2 + cordova 应用-导航_第5张图片
  • 大小: 2.1 MB
  • ionic2 + cordova 应用-导航_第6张图片
  • 大小: 16.4 KB
  • ionic2 + cordova 应用-导航_第7张图片
  • 大小: 91.2 KB
  • 查看图片附件

你可能感兴趣的:(ionic2,cordova,angular,form,导航)