`

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 打开阿里图标官网



 

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



 

 5.2.3 项目内设置css



 

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

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

 

 

  • 大小: 18.2 KB
  • 大小: 2.1 MB
  • 大小: 16.4 KB
  • 大小: 91.2 KB
分享到:
评论

相关推荐

    ionic3-cordova-barcode-qrcode-scanner-master_ionic3_phone_

    1. **Ionic 3 基础**:包括如何设置项目结构、使用 AngularJS 语法、创建页面、服务和指令,以及配置 Ionic 3 应用的导航系统。 2. **Cordova 集成**:了解如何安装和配置 Cordova,以及如何添加特定的设备插件,...

    ionic+Angular+Cordova初学者文档

    "15 ionic路由详解.pdf"则关注于 Ionic 应用的导航和页面间跳转。在混合应用中,路由管理是至关重要的,它允许用户在不同的视图之间自由切换。此文档将详细介绍`ui-router`的使用,包括状态配置、参数传递和嵌套路由...

    最全的ionic+cordova+angularjs安装指南

    在开发跨平台移动应用时,使用Ionic、Cordova和AngularJS结合可以发挥各自的优势。Ionic提供了一套丰富的UI组件和交互模式,使得开发者能够创建外观和体验一致的应用;Cordova则充当桥接角色,它使得开发者能够利用...

    初学者 nodejs+ionic+cordova 详细安装教程

    2. **构建iOS IPA**:使用命令 `cordova build ios` 构建 iOS 应用。 **安装APP到模拟器** 1. **Android模拟器**:使用命令 `cordova run android --emulator` 将应用安装到 Android 模拟器。 2. **iOS模拟器**:...

    cordova,ionic 例程

    Cordova主要负责将Web应用程序打包成原生应用,而Ionic则提供了丰富的UI组件和工具,用于构建具有现代感的移动应用界面。 **Cordova** Cordova是由Apache软件基金会开发的一款开源移动应用开发框架,它允许开发者...

    使用Ionic2制作移动应用

    ### 使用Ionic2制作移动应用 #### 一、Ionic2基础知识概览 Ionic2是一个开源的框架,用于构建高性能的跨平台移动应用。它基于Angular2+ 和 Cordova/PhoneGap,利用HTML、CSS和JavaScript来开发原生感受的应用。本...

    EXPERT-Building-Mobile-Apps-with-Ionic-2

    ### 使用Ionic 2构建移动应用的关键知识点概览 #### 引言 Ionic 2是一款基于Angular框架的开源SDK,用于构建高性能的混合移动应用程序。它提供了丰富的UI组件库,能够帮助开发者快速创建美观且功能丰富的应用程序...

    cordova-ionic-angular 一个完整的社区APP源码

    总之,"cordova-ionic-angular 一个完整的社区APP源码"为开发者提供了一个宝贵的实战学习平台,通过深入研究和实践,不仅可以掌握移动应用开发的基础技能,还能提升对Cordova、Ionic和Angular集成运用的理解。...

    ionic-cordova-phonegap-examples:一些离子和cordovaphonegap的例子

    《Ionic与Cordova/PhoneGap应用开发实例解析》 在当今移动应用开发领域,Ionic、Cordova和PhoneGap是三个非常重要的技术栈。本篇将深入探讨这些技术及其结合使用的方式,通过具体实例来帮助开发者更好地理解和应用...

    ionic应用-tab应用+返回键监听

    标题中的“ionic应用-tab应用+返回键监听”指的是使用Ionic框架构建的一款应用,该应用采用了Tab导航模式,并且集成了返回键监听功能。Ionic是一款基于AngularJS和Apache Cordova的移动应用开发框架,它允许开发者...

    Building Mobile Apps with Ionic 2 final2.0 (附项目源码)

    7. **原生插件使用**:虽然Ionic 2的应用是基于Web技术,但可以通过Cordova插件接入原生设备功能,如GPS定位、摄像头、蓝牙等。 8. **性能优化**:理解如何通过懒加载、离线包和AOT编译(Ahead-of-Time)提升应用的...

    用Ionic2编写移动应用程序

    根据提供的文件信息,将生成关于使用Ionic2编写移动应用程序的知识点: 首先,Ionic2是一个用于构建移动应用的开源前端框架。通过使用Ionic2,开发者可以利用Web技术(如HTML、CSS和JavaScript)创建跨平台的移动...

    ionic+phonegap 案例源码

    Ionic框架的核心特点包括使用AngularJS(现在是Angular)进行数据绑定和状态管理,使用Sass进行样式定义,以及提供了一套丰富的UI组件,如导航、滑动、表单等,用于构建具有原生外观和感觉的应用。此外,Ionic还...

    Android-ioniccordova导航插件URI方式调用高德和百度APP支持Android和ios

    总结起来,使用“Android-ioniccordova导航插件URI方式调用高德和百度APP支持Android和ios”的技术,开发者可以在Ionic+Cordova应用中轻松集成地图导航功能,借助用户设备上已经安装的高德或百度地图应用,提供无缝...

    IONIC-Angular-Typescript-Sample:使用Ionic3,Angular4和Typescript2开发的移动应用

    这是一个示例应用程序,演示了如何使用Ionic 3,Angular 4和Typescript 2构建移动应用程序。 安装说明 请按照以下说明安装应用程序并通过模拟(内存)数据服务运行它: 确保您具有最新版本的Cordova和Ionic: npm...

    ionic-angularjs-kitchensink:使用 Ionic Framework + AngularJS 开发的简单厨房水槽应用程序

    使用 Cordova 构建原生打包应用程序 请参阅 Ionic-AngularJS-IntelXDK-Seed 项目以开始使用构建原生打包应用程序: 英特尔 XDK 将帮助您使用任何 HTML5 项目轻松构建适用于 iPhone/iPad、Android、Windows Phone 和...

    cordova-plugins-tntgdlocation.zip

    总的来说,`cordova-plugins-tntgdlocation.zip` 文件提供了一个自定义的 Cordova 插件,解决了在 Ionic 应用中使用高德地图定位服务的问题。这个插件展示了如何将原生功能与 Web 开发技术结合,为跨平台移动应用...

    ionic-vue-getting-started:Ionic + Vue YouTube入门视频的源代码-vue source code

    本文将深入探讨`Ionic + Vue`的集成应用开发,基于提供的`ionic-vue-getting-started`项目源代码。这个项目是为初学者设计的,旨在帮助他们快速掌握使用Ionic框架与Vue.js进行移动应用开发的基本知识。我们将讨论...

    ionic-字母索引-城市选择

    它与Angular和 Capacitor 或 Cordova 配合使用,使开发者能够使用一套代码库跨平台开发iOS、Android和Web应用。 - ** Angular**:Angular是Google维护的一个前端框架,用于构建单页应用程序。它提供了数据绑定、...

    ulyagentapp:Simm Ionic + Ulysses学习应用程序

    标题 "ulyagentapp:Simm Ionic + Ulysses学习应用程序" 暗示这是一个使用Simm Ionic框架开发的移动应用,结合了Ulysses学习平台的功能。Simm Ionic是基于Ionic框架的一个定制版本,而Ionic是一个开源的、基于HTML5的...

Global site tag (gtag.js) - Google Analytics