欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic2 + cordova 应用-导航

程序员文章站 2022-05-31 08:26:01
...

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 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
 

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


ionic2 + cordova 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
 

 5.2.3 项目内设置css


ionic2 + cordova 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
 
ionic2 + cordova 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
 IOS要设置俩个css(没试过,参考他人要价格outline后缀的)然后加入图标到tabs.html

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

 

 

  • ionic2 + cordova 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
  • 大小: 18.2 KB
  • ionic2 + cordova 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
  • 大小: 2.1 MB
  • ionic2 + cordova 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
  • 大小: 16.4 KB
  • ionic2 + cordova 应用-导航
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangularform导航 
  • 大小: 91.2 KB