手摸手带你入门ionic3(六):界面跳转
我们的APP肯定不是只有一个界面,这就需要了解ionic的内部导航的用法了。在ionic介绍这一章节提到,ionic实现了适合移动端开发的堆栈式导航系统,通过简单的push
和pop
实现界面的跳转和传值。ionic中界面分两种,懒加载界面和非懒加载的,所以这篇我们分两个部分来讲解,最后会介绍下懒加载界面和非懒加载界面的区别。
还是使用之前的项目,根目录下通过ionic serve
运行我们的项目
懒加载界面
根目录下,通过ionic generate page lazy-load
(关于此命令的更多解释见文章最后)创建一个懒加载界面,会在src/pages
目录下新建一个文件夹,里面包含四个文件。如下:
── pages
│ ...
│ └── lazy-load
│ ├── lazy-load.html
│ ├── lazy-load.module.ts
│ ├── lazy-load.scss
│ └── lazy-load.ts
复制代码
下面开始从home
页跳转到LazyLoad
界面,首先在home
页添加button
按钮,并绑定点击跳转的事件,代码如下:
home.html...
<button class="btn-primary" (click)="toLazyLoadPage()">跳转到懒加载界面</button>
复制代码
home.ts...toLazyLoadPage() {this.navCtrl.push('LazyLoadPage', {name: 'ionic',age: 18});}
复制代码
解释一下:NavController
是ionic
导航的核心,它提供了push()
操作可以跳转并传值至其他界面,this.navCtrl.push(page:string,params:object)
中第一个参数是懒加载界面的名字,是string
类型,第二个是传给下一个界面的参数,是Object
类型。懒加载界面的名字是lazy-load.ts
中导出的类的名字。
下面我们开始在懒加载界面中接收数据,代码如下(ionic创建界面时自动生成的注释可以删除):
lazy-load.html<ion-header><ion-navbar><ion-title>lazy-load</ion-title></ion-navbar>
</ion-header><ion-content padding><p>name:{{name}}</p><p>age:{{age}}</p><button (click)="back()">返回上一界面</button>
</ion-content>
复制代码
lazy-load.ts...
export class LazyLoadPage {name:string;age:number;constructor(public navCtrl: NavController, public navParams: NavParams) {this.name=this.navParams.get('name');this.age=this.navParams.get('age');}back(){this.navCtrl.pop();}...
}
复制代码
解释一下:通过NavParams
提供的get
方法可以从上一界面获取数据,get(param:string)
中的param
就是上一界面中传过来的Object
中的key
,这儿要换成string
类型。通过 NavControl.pop()
可以返回至上一界面。
保存后,项目自动刷新,在首页点击按钮,会发现跳转失败invalid link LazyLoadPage
,通过ctrl+c
终止项目,然后运行ionic serve
重启即可。
效果如下:
非懒加载界面
根目录下,通过ionic generate page normal-load --no-module
(关于此命令行的更多解释见文章最后)创建一个非懒加载界面,此时会在src
文件夹下会增加新的文件夹,此时目录如下:
.
├── app
├── components
├ ...
├── pages
│ ├── home
│ │ ├── home.html
│ │ ├── home.scss
│ │ └── home.ts
│ ├── lazy-load
│ │ ├── lazy-load.html
│ │ ├── lazy-load.module.ts
│ │ ├── lazy-load.scss
│ │ └── lazy-load.ts
│ └── normal-load
│ ├── normal-load.html
│ ├── normal-load.scss
│ └── normal-load.ts
...
复制代码
对比可以发现,非懒加载界面少了一个module.ts
文件,除此之外,normal-load.ts
的代码中少了@IonicPage()
这个装饰器。
然后修改app.module.ts
中的内容如下:
...
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NormalLoadPage } from '../pages/normal-load/normal-load';@NgModule({declarations: [MyApp,HomePage,NormalLoadPage],...entryComponents: [MyApp,HomePage,NormalLoadPage],...
})
export class AppModule {}
复制代码
Note:只要是非懒加载的界面,都需要在app.module.ts
中这两处添加,除非APP很大后使用子模块,这个是后话了,这里不考虑此情况。
下面处理非懒加载界面的跳转,在home
页添加button
按钮,并绑定点击跳转的事件,代码如下:
home.html
...
<button class="btn-primary" (click)="toNormalLoadPage()">跳转到非懒加载界面</button>
复制代码
home.tsimport { NormalLoadPage } from '../normal-load/normal-load';
...
toNormalLoadPage(){this.navCtrl.push(NormalLoadPage, {name: 'handbook',age: 20});}
复制代码
同样需要NavController.push()
方法这里需要注意的是NormalLoadComponent
是非懒加载界面,并且需要导入,不是string,比较下和跳转到懒加载界面的区别。
接着处理非懒加载界面,代码如下:
normal-load.html<ion-header><ion-navbar><ion-title>normal-load</ion-title></ion-navbar>
</ion-header><ion-content padding><p>name:{{name}}</p><p>age:{{age}}</p>
</ion-content>
复制代码
normal-load.tsimport { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';@Component({selector: 'normal-load',templateUrl: 'normal-load.html'
})
export class NormalLoadPage {name:string;age:number;constructor(public navCtrl: NavController, public navParams: NavParams) {this.name=this.navParams.get('name');this.age=this.navParams.get('age');}}
复制代码
获取从上一界面传过来的值的用法和上部分是一样的,同样,返回上一界面的方法也是一致的,这里就不再赘述了,感兴趣的可以参考上面的用法试一下。 运行一下,效果如下:
解释
generate命令
生成懒加载和非懒加载界面的时候,我们用到了ionic提供的命令ionic generate [<type>] [<name>]
,熟悉Angular开发的人会觉得很亲切,其中type类型有component(组件)
,directive(指令)
, pipe(管道)
,provider(service)
,tabs(tabs页面)
,page(界面)
,前三个和Angular中是一样的概念,provider
其实就是service
,换了一个叫法而已,后面两个是ionic
特有的类型。更多命令行的用法请参见 commands
Note:创建界面的命令只在根目录下才起作用,其他目录下运行会报错。另外 lazy-load
如果改变成lazy-load-page
会发现生成的文件名称会自动把page
去掉,这是ionic默认处理的。
懒加载和非懒加载
App
在运行时会首先加载app.module.ts
中的内容,假如AppModule
需要加载的界面过多,会影响性能,从而影响用户体验。特别是在项目很大,界面很多,某些界面很少被点击进入的情况下,这就造成了浪费。
ionic3
中贴心的提供了界面懒加载的功能,当用户点击跳转的时候,界面才加载进来,节约了App
启动所需的加载时间和资源。
当然ionic 3
也有预加载,具体参见 ionicPage,需要大家自己去研究了。
后记
本人在写一个ionic入门的教学手册 ionic3-handbook,还有一个基于真实项目的ionic项目HW-basic,感兴趣的可以看一下。
手摸手带你入门ionic3(六):界面跳转相关推荐
- 带你手摸手搭建vuepress站点
vuePress是什么? VuePress 俺简单介绍下,是国内有名大神的尤雨溪发布的全新基于 vue 静态网站的生成器,内置的有 webpack组件,可以拿来写文档,主要是md格式.做出的感觉就是简 ...
- 手摸手带你理解 进制 字节 ASCII码 Unicode 与 字节编码(UTF-8 /16)等(下)
手摸手带你理解 进制 字节 ASCII码 Unicode 与 字节编码(UTF-8 /16)等(上) Unicode 先讲讲这个东西的规则 Unicode 通常(不是所有)用两个字节来表示 一个字符 ...
- 每天研究一个产品,阿德老师“手摸手”带你写产品分析报告 |
作为一个产品经理,要高频地去把玩各种最新产品,所以我们想把那些对世界充满好奇心.勇于探索新鲜事物的产品经理都聚在一起.一起深入研究国内外最新/奇产品,一起发现有趣的事情,并把研究心得都整理成文章沉淀下 ...
- 手摸手,带你用vue撸后台 系列一(基础篇) - 掘金
完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台 系列一(基础篇) 手摸手,带你用 vue 撸后台 系列二(登录权限篇) 手摸手,带你用 vue 撸后台 系 ...
- 《手摸手带你学ClickHouse》之Oracle同步数据到Clickhouse
本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 chaodev 即可关注. 文章目录 前文回顾: <手摸手带你学ClickHouse>之安装部署 <手摸手带你学Cl ...
- 手摸手带你写项目----秒杀系统(一)
博客地址: 手摸手带你写项目----秒杀系统(一) 所有文章会第一时间在博客更新! 后面的时间我会手摸手带大家一起写几个实战性的项目.主要希望能应用上之前梳理的那些知识点,同时让没有写过项目的同学对实 ...
- 手摸手带你学移动端WEB开发
HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP ...
- 《手摸手带你学ClickHouse》之安装部署
本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 chaodev 即可关注. 文章目录 1.Clickhouse简介 1.1 简介 1.2 应用场景 1.3 架构 2. ClickHo ...
- 手摸手带你用实现vue全屏loading插件
手摸手带你用实现vue全屏loading插件 前言: 由于我们打开网页时,浏览器与服务器交互需要时间,受限于宽带以及服务器性能,导致用户在访问一个网页时,往往需要一个等待期,才能在浏览器中真正完全展示 ...
- 微服务(三) 【手摸手带你搭建Spring Cloud】 Ribbon 什么是负载均衡?spring cloud如何实现负载均衡?ribbon负载均衡有几种策略?Ribbon是什么?
在上一章,我介绍了springcloud的eureka搭建.我们做了服务注册.最后我们还介绍了一些续约,失效剔除等参数配置.已经不需要再通过手动输入ip去访问服务,而是通过中心只需要通过服务名就可以获 ...
最新文章
- MySQL如何判别InnoDB表是独立表空间还是共享表空间
- 【错误记录】Visual Studio 中配置 NDK 头文件路径 ( NDK 的三个头文件路径 | 与 CPU 架构相关 asm 头文件路径选择 )
- java url编码解码
- 高斯课堂数电讲义笔记_【法考经验贴】40岁三战主观题127分!他的笔记学习法助他逆袭!...
- c语言作业模拟虚拟内存,如何用c语言实现虚拟内存
- Java常用数据类型
- 在 ML2 中配置 Vlan Network- 每天5分钟玩转 OpenStack(93)
- 解决VB6.0中不能加载MSCOMCTL.OCX的错误提示
- Android4开发入门经典 之 第四部分:用户界面
- python变量使用前必须先声明_Python变量使用前必须先声明,并且一旦声明就不能再当前作用域内改变其类型。_学小易找答案...
- 动态时间规整—DTW算法
- 论文笔记—RGB-D SLAM in Dynamic Environments Using Static Point Weighting
- Blender图解教程:手把手教你独立游戏开发必备的极简式贴图法
- CPP全面总结(涵盖C++11标准)
- Prometheus 通过钉钉告警
- 辅助 Excel 的数据计算 add-ins
- java file mac ox_MAC OX 配置JDK环境变量
- python中年月日时分秒格式
- html页面文字随机效果,教你用javascript实现随机标签云效果_附代码
- 根据身份证号判断性别