本来的需求:

新建的Ionic项目是Tabs菜单,假设有两个选项卡 A 和 B(从左到右),对应的两个页面的代码完全一样,使用了echarts 插件,并且使用了一个获取页面元素的方法,给自己的一个变量赋值,然后将echarts图写入到这个元素里面。

html中
<div id="chartContainer"></div>

ts中
this.chartContainer = document.getElementById('chartContainer');

这样导致的效果是:

两个页面上的echarts图,在A 页面切换到B 选项卡的时候,A 能展示,B 为空白;若先打开B页面, B页面能展示echarts图,切换到A页面,A页面也能展示echarts图,但是再返回B页面,B页面就不能显示echarts了。

最后当我把其中一个的id更改了以后,就没有这个问题了。

我的理解是:

Tabs菜单有两个,对应的页面堆栈就有两个,这两个页面堆栈还有优先级,跟tabs.ts 中代码的顺序有关。

A 切换到B ,A 能展示,B 为空白:当我打开了A 页面,栈区里记录了A 页面的元素 <div id="chartContainer"></div> 。当我再打开B 页面的时候,A 页面并没有被销毁,它在栈区的变量也就没有移出去。此时再打开B 页面,通过document.getElementById('chartContainer'); 获取到的元素,仍然是A 页面中的元素。所以B 页面才会是空白的。

B切换到A,还是A展示,B不能展示:是因为要优先读取A栈区中的值。

证明:

1、验证页面堆栈就有多个,在A和B两个页面,分别添加一段代码,跳转到根页面,看一看是否是同一个页面。

在两个页面中都添加同样的一段代码:

html

<button (click)="f()">测试</button>

ts
f(){
  this.navCtrl.popToRoot();
}

结果:分别跳转回了对应的Tabs 菜单的首页。

2、验证页面堆栈有优先级,跟tabs.ts 中代码的顺序有关

  将tabs.ts 文件中的两行代码换下顺序,看一看结果是否会颠倒。

原来的代码是:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="A"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="B"></ion-tab>
</ion-tabs>

更改后为:

<ion-tabs>
  <ion-tab [root]="tab2Root" tabTitle="B"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="A"></ion-tab>
</ion-tabs>

结果:B 切换到A ,B 能展示,A 为空白;A切换到B,还是B展示,A不能展示,确实颠倒了。

我觉得我的理解是正确的,如有不对,请指正!

原创文章,欢迎转载,转载请注明出处!

Ionic的页面堆栈与Tabs菜单相遇的问题(页面堆栈有多个)的更多相关文章

  1. 关于easyUI 的tabs 在子页面增加显示tabs的一个问题

    在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php现在说的是在子页面点个按钮也能触发增 ...

  2. 关于easyUI在子页面增加显示tabs的一个问题

    在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php 现在说的是在子页面点个按钮也能触发 ...

  3. Page Scroll Menu (页面中锚点菜单)

    Technorati 标签: Page Scroll Menu,页面锚点菜单,Menu,Too Long,页面太长   当页面太长时,会导致浏览不便,这时就需要一个页面锚点菜单(Page Scroll ...

  4. 【BUG】---ionic tab-demo项目在modal页跳转URL改变页面不刷新,手动刷新后显示空白

    问题描述: 项目是基于ionic tab的demo,在modal上访问其他页面,地址栏变化了,但是页面不动没刷新,自己手动刷新呢,还是空白,可是访问的页面时有内容的啊 错误: 我的路由配置 .stat ...

  5. ionic3之自定义tabs菜单图标

    请参考以下链接 ionic3之自定义tabs菜单图标

  6. asp页面快速找到菜单按钮转向的页面的方法

    asp页面快速找到菜单按钮转向的页面的方法: 鼠标放在按钮上,右键属性即可查看

  7. EasyUI-子页面增加显示tabs的一个问题

    在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php现在说的是在子页面点个按钮也能触发增 ...

  8. js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享

    禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...

  9. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

随机推荐

  1. 修改docker0默认IP地址

    第一步:vim /etc/docker/daemon.json { "registry-mirrors": ["https://docker.mirrors.ustc.e ...

  2. 牛客网 Python 编程输入规范

    import sys try: while True: line = sys.stdin.readline().strip() if line == '': break lines = line.sp ...

  3. 便于记忆的SA构造

    首先学习基数排序. memset(b, 0, sizeof(b)); for(int i = 0; i < n; i++) b[a[i]]++; for(int i = 1; i <= m ...

  4. Vue diff 算法

    一.虚拟 DOM (virtual dom) diff 算法首先要明确一个概念就是 diff 的对象是虚拟DOM(virtual dom),更新真实 DOM 是 diff 算法的结果. 注:virtu ...

  5. 第十二届湖南省赛G - Parenthesis (树状数组维护)

    Bobo has a balanced parenthesis sequence P=p 1 p 2…p n of length n and q questions. The i-th questio ...

  6. Day12 Python基础之生成器、迭代器(高级函数)(十)

    https://www.cnblogs.com/yuanchenqi/articles/5769491.html 1. 列表生成式 我现在有个需求,看列表[0, 1, 2, 3, 4, 5, 6, 7 ...

  7. 【问题解决方案】本地代码文件上传到GitHub里中文乱码问题

    刚刚学完Git并试着上传了我的化石Java代码到远程库,表面一切和谐,然而.. 真让人大惊失色.. step1-检查浏览器是否是utf-8(谷歌默认是) step2-在本地编辑器设置 (按理说,not ...

  8. 【转】Docker部署Tomcat及Web应用

    Docker部署Tomcat及Web应用 - Scofield_No1的博客 - CSDN博客https://blog.csdn.net/qq_32351227/article/details/786 ...

  9. 生成短链接的URL

    假设你想做一个像微博短链接那样的短链接服务,短链接服务生成的URL都非常短例如: http://t.cn/E70Piib, 我们应该都能想到链接中的E70Piib对应的就是存储长链接地址的数据记录的I ...

  10. telnet总结

    telnet是经常使用的客户端链接工具,总结一下常用的telnet的使用方法 1) 连接 telnet //链接swoole 2)退出当前连接 ctrl + ] 回车 3)查看常用的一些命令 ? 回车 ...