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

页面想要“跳来跳去”的需要借助“工具”才能实现,就好像我们要攀岩需要有绳子一样,当前的“绳子”就是我们出场率很高的导航控制器NavController
,首先需要在在页面顶端引入
import { NavController } from ‘ionic-angular’
项目中的实际应用情况见下图:

只是引用组件的话,我们的导航控制器还不能使用,必须在构造器中初始化组件才能进行下一步。
//构造器中初始化组件
constructor(public navCtrl: NavController) {
//do some thing
// or
// don`t
}

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

很简单不是么?不过这只是开始,世界上唯一不变的就是变化,具体使用情境的逻辑或是客户的异想天开,总会给我们带来各种各样的奇葩体验。后面就是进阶装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的页面。就像下图所示。

这样的原因是因为我们在tab.html中已经设置了每个root。所以我们的popToRoot
只能让我们返回至各自的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 theNavController
instance. For example, assuming you have aTabsPage
component, you could call the following from any of the child components to switch toTabsRoot3
:switchTabs() {
this.navCtrl.parent.select(2);
}
select
方法的参数是tabs的index值,从零开始计算。
这个方法可以让我们从一个组件中直接跳转到不同的tabs根位置。例如我的项目中是这样用的:

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

ionic3跳转页面的方法的更多相关文章
- ASP.NET弹出提示点击确定之后再跳转页面的方法
//ASP.NET弹出提示点击确定之后再跳转页面的方法 //弹出了提示并且通过location.href转到了DeskTop.aspx页面 Response.Write("<scrip ...
- Spring MVC 跳转页面的方法
转一个Spring MVC 跳转页面的方法,楼主总结的很全面,留着备用. https://blog.csdn.net/c_royi/article/details/78528758
- js跳转页面的方法
js跳转页面的几种方法 第一种:(跳转到b.html) <script language="javascript" type="text/javascript&qu ...
- Spring Security 使用Ajax登陆无法跳转页面解决方法
使用Security的朋友都知道,使用Security后,不再需要我们自己过多的(还需要写少量代码)写登陆的逻辑,只需要自己在html的登陆表单上面定义好输入框name为:username和passw ...
- asp.net跳转页面的三种方法比较(转)
2006-10-20 14:32 [小 大] 来源: 博客园 评论: 0分享至: 百度权重查询 词库网 网站监控 服务器监控 SEO监控 手机游戏 iPhone游戏 今天老师讲了三种跳转页面的方法,现 ...
- asp.net跳转页面的三种方法比较
目前,对于学习asp.net的很多朋友来讲,实现跳转页面的方法还不是很了解.本文将为朋友们介绍利用asp.net跳转页面的三种方法,并对其之间的形式进行比较,希望能够对朋友们有所帮助. ASP.NET ...
- ASP.NET页面跳转的三大方法详解
ASP.NET页面跳转有什么方法呢?,现在给大家介绍三种方法,他们的区别是什么呢?让我们开始吧: ASP.NET页面跳转1.response.redirect 这个跳转页面的方法跳转的速度不快,因为它 ...
- asp.net(c#)网页跳转七种方法小结
在asp.net下,经常需要页面的跳转,下面是具体的几种方法.跳转页面是大部编辑语言中都会有的,正面我们来分别介绍一下关于.net中response.redirect sever.execute se ...
- 详细介绍ASP.NET页面重定向方法
ASP.NET中页面重定向的使用的很频繁,实现方法也有不同,自己也试过几种,现在总结一下. 一.Transfer Execute Redirect重定向方法介绍 1.Server.Transfer方法 ...
随机推荐
- puamap是什么意思
artists map 定义格式:[puamap代号 名] 相关属性: 1.FIGHT 2.SAFE 安全区域 3.DARK 4.NEEDHOLE 配合mapinfo里 x,y -> x1,y1 ...
- C++中的隐式转换和explicit
隐式转换 c++中的数据类型转换分为隐式转换和显示转换: 显示转换即使用static_cast等方法进行转换,相关内容请参考 <C++数据类型转换>: 隐式转换则是编译器完成的,如,boo ...
- 【Flink】使用之前,先简单了解一下Flink吧!
目录 Flink简单介绍 概述 无边界数据流和有边界数据流 技术栈核心组成 架构体系 重要角色 Flink与Spark架构概念转换 Flink简单介绍 概述 在使用Flink之前,我们需要大概知 ...
- vue 如何实现 Input 输入框模糊查询方法
原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item, ...
- [poj2778 DNA Sequence]AC自动机,矩阵快速幂
题意:给一些字符串的集合S和整数n,求满足 长度为n 只含charset = {'A'.'T‘.'G'.'C'}包含的字符 不包含S中任一字符串 的字符串的种类数. 思路:首先对S建立ac自动机,考虑 ...
- 我的linux学习日记day5
一.vim 编辑器 有三种模式,命令模式,输入模式,末行模式 1.下面是命令模式常用的命令 2.末行模式常用命令 :w 保存 :q 退出 :q! 强制退出 :wq! 强制保存退出 :set nu 显示 ...
- Vue中import用法
1. 引入第三方插件 第三方常用插件参考https://blog.csdn.net/vbirdbest/article/details/86527886 2. 导入 css 文件 import 'iv ...
- 01.drf文档及外键字段反序列化
一 安装drf 1.1 安装库 pip install djangorestframework pip install markdown # Markdown support for the brow ...
- vue修改对象的属性值后页面不重新渲染
原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...
- 模板:DOM常用场景【表单提交】——javascript结合HTML DOM(或者JQuery)运用
一.删除行为前的提示 首先要有一个onclick的DOM(点击)事件,和一个JavaScript弹出框:confirm()确认框 <script> function del(){ var ...