ionic3很好很强大,有人喷有人赞。不想参与其中,个人认为如果能很好的满足需求,好坏都是无所谓的,最合适的才是最好的。总结下最近使用ionic3的一些知识点,方便以后查询。多句嘴:会ionic3和只会ionic3是两个境界。

今天有妹子镇楼。今天的是……

 
2B小姐姐

页面想要“跳来跳去”的需要借助“工具”才能实现,就好像我们要攀岩需要有绳子一样,当前的“绳子”就是我们出场率很高的导航控制器NavController,首先需要在在页面顶端引入

import { NavController } from  ‘ionic-angular’

项目中的实际应用情况见下图:

 
导航控制器

只是引用组件的话,我们的导航控制器还不能使用,必须在构造器中初始化组件才能进行下一步。

//构造器中初始化组件
constructor(public navCtrl: NavController) {
//do some thing
// or
// don`t
}
 
构造器中初始化导航控制器

然后我们就可以用navCtrl的的push方法来跳转想要的组件页面。根据typescript的尿性,一般情况下我们需要这样使用:

this.navCtrl.push(XXXPage,{data});
 
跳转至LoginPage组件

很简单不是么?不过这只是开始,世界上唯一不变的就是变化,具体使用情境的逻辑或是客户的异想天开,总会给我们带来各种各样的奇葩体验。后面就是进阶装B阶段,都闪开!

 
我要开始装了,都闪开

假设一种情景,我们的页面已经进入的足够深,例如:

列表A --> 列表A2 --> 列表A23--> 列表A235 --> .... --> 内容

ionic3的默认方法只是返回上一级,如果我们想从内容返回至列表A,必须很麻烦的从内容逐级点返回按钮来返回上一级直至列表A,有多少层就要点击多少次,要是路径足够深估计会点到内伤吐血,这样的设计会大幅度降低用户体验。有没有什么方法可以从内容直接返回至列表A呢?

回答是肯定的,万物皆有道。万物皆有法。道法文档,才能一切皆有可能。方法popToRoot就是这样一个方便的神器,它可以直接让我们返回至导航的根位置,而不管它距离根有多远。关于这货的使用方法我摘抄自ionic3官方文档NavController部分

popToRoot(opts)

Navigate back to the root of the stack, no matter how far back that is. <<注意这句话

Param Type Details
opts object Nav options to go with this transition.

Returns a promise which is resolved when the transition has completed.

opts决定了在跳转时候的过渡效果,在完成功能最高权重思想的指引下下,这个参数我们可以无视。popToRoot方法在具体项目中的运用:

 
返回导航的根

哈哈!这下我们再也不怕“深”了。有此利器,再深我们也能自信满满的进去闯一闯。(气氛怎么有点怪怪的?)

 

完了么?没有!!具体使用情境是千变万化的,从来没有固定套路。popToRoot很强大,但是有一种情况绝对会让它无能为力。

 

例如,我们有三个tabs,在tabs3下面的的深层路径组件使用popToRoot只能让我们直接返回到tabs3的页面。就像下图所示。

 
返回root的根

这样的原因是因为我们在tab.html中已经设置了每个root。所以我们的popToRoot只能让我们返回至各自的root.

 
设置root

我们会经常遇见这种情况,就是我们需要从tabs3下面的深层次组件需要跳转到tabs1的根。这个需求是popToRoot无法满足的。

例如在项目中我的tabs3是设置选项,如果不是登录状态的话有些设置是不能操作的,这个时候需要提示用户登录,在提示界面如果用户不点击登录而是点击返回。在返回事件中使用popToRoot只会让我们返回tabs3页面,这恰恰不是我们需要的,我们需要的是用户直接返回至tabs1的首页。看来还要想另外的办法。

 
跳转不同的根

万事不决找文档。其实目前问题已经转向了,并不是导航NavController的功能范畴了,tabs的加入让问题开始变的扑朔迷离,看来我们需要从tabs相关文档开始查阅。

功夫不负有心人,在ionic3官方文档tabs部分中我们找到了一下的这句话:

You can also switch tabs from a child component by calling select() on the parent view using the NavController instance. For example, assuming you have a TabsPage component, you could call the following from any of the child components to switch to TabsRoot3:

switchTabs() {
this.navCtrl.parent.select(2);
}

select方法的参数是tabs的index值,从零开始计算。

这个方法可以让我们从一个组件中直接跳转到不同的tabs根位置。例如我的项目中是这样用的:

 
跨根跳转

刚接触ionic肯定会有错误,欢迎指正,不欢迎吐槽~

 
报告完毕

ionic3跳转页面的方法的更多相关文章

  1. ASP.NET弹出提示点击确定之后再跳转页面的方法

    //ASP.NET弹出提示点击确定之后再跳转页面的方法 //弹出了提示并且通过location.href转到了DeskTop.aspx页面 Response.Write("<scrip ...

  2. Spring MVC 跳转页面的方法

    转一个Spring MVC 跳转页面的方法,楼主总结的很全面,留着备用. https://blog.csdn.net/c_royi/article/details/78528758

  3. js跳转页面的方法

    js跳转页面的几种方法 第一种:(跳转到b.html) <script language="javascript" type="text/javascript&qu ...

  4. Spring Security 使用Ajax登陆无法跳转页面解决方法

    使用Security的朋友都知道,使用Security后,不再需要我们自己过多的(还需要写少量代码)写登陆的逻辑,只需要自己在html的登陆表单上面定义好输入框name为:username和passw ...

  5. asp.net跳转页面的三种方法比较(转)

    2006-10-20 14:32 [小 大] 来源: 博客园 评论: 0分享至: 百度权重查询 词库网 网站监控 服务器监控 SEO监控 手机游戏 iPhone游戏 今天老师讲了三种跳转页面的方法,现 ...

  6. asp.net跳转页面的三种方法比较

    目前,对于学习asp.net的很多朋友来讲,实现跳转页面的方法还不是很了解.本文将为朋友们介绍利用asp.net跳转页面的三种方法,并对其之间的形式进行比较,希望能够对朋友们有所帮助. ASP.NET ...

  7. ASP.NET页面跳转的三大方法详解

    ASP.NET页面跳转有什么方法呢?,现在给大家介绍三种方法,他们的区别是什么呢?让我们开始吧: ASP.NET页面跳转1.response.redirect 这个跳转页面的方法跳转的速度不快,因为它 ...

  8. asp.net(c#)网页跳转七种方法小结

    在asp.net下,经常需要页面的跳转,下面是具体的几种方法.跳转页面是大部编辑语言中都会有的,正面我们来分别介绍一下关于.net中response.redirect sever.execute se ...

  9. 详细介绍ASP.NET页面重定向方法

    ASP.NET中页面重定向的使用的很频繁,实现方法也有不同,自己也试过几种,现在总结一下. 一.Transfer Execute Redirect重定向方法介绍 1.Server.Transfer方法 ...

随机推荐

  1. puamap是什么意思

    artists map 定义格式:[puamap代号 名] 相关属性: 1.FIGHT 2.SAFE 安全区域 3.DARK 4.NEEDHOLE 配合mapinfo里 x,y -> x1,y1 ...

  2. C++中的隐式转换和explicit

    隐式转换 c++中的数据类型转换分为隐式转换和显示转换: 显示转换即使用static_cast等方法进行转换,相关内容请参考 <C++数据类型转换>: 隐式转换则是编译器完成的,如,boo ...

  3. 【Flink】使用之前,先简单了解一下Flink吧!

    目录 Flink简单介绍 概述 无边界数据流和有边界数据流 技术栈核心组成 架构体系 重要角色 Flink与Spark架构概念转换 Flink简单介绍 概述    在使用Flink之前,我们需要大概知 ...

  4. vue 如何实现 Input 输入框模糊查询方法

    原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item, ...

  5. [poj2778 DNA Sequence]AC自动机,矩阵快速幂

    题意:给一些字符串的集合S和整数n,求满足 长度为n 只含charset = {'A'.'T‘.'G'.'C'}包含的字符 不包含S中任一字符串 的字符串的种类数. 思路:首先对S建立ac自动机,考虑 ...

  6. 我的linux学习日记day5

    一.vim 编辑器 有三种模式,命令模式,输入模式,末行模式 1.下面是命令模式常用的命令 2.末行模式常用命令 :w 保存 :q 退出 :q! 强制退出 :wq! 强制保存退出 :set nu 显示 ...

  7. Vue中import用法

    1. 引入第三方插件 第三方常用插件参考https://blog.csdn.net/vbirdbest/article/details/86527886 2. 导入 css 文件 import 'iv ...

  8. 01.drf文档及外键字段反序列化

    一 安装drf 1.1 安装库 pip install djangorestframework pip install markdown # Markdown support for the brow ...

  9. vue修改对象的属性值后页面不重新渲染

    原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...

  10. 模板:DOM常用场景【表单提交】——javascript结合HTML DOM(或者JQuery)运用

    一.删除行为前的提示 首先要有一个onclick的DOM(点击)事件,和一个JavaScript弹出框:confirm()确认框 <script> function del(){ var ...