本来的需求:

新建的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. zabbix安装与配置

    一.什么是zabbix及优缺点(对比cacti和nagios) Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题.是一个基于WE ...

  2. H5 24-CSS三大特性之继承性

    24-CSS三大特性之继承性 我是段落 我是段落 我是超链接 我是大标题 <!DOCTYPE html> <html lang="en"> <head ...

  3. stark组件的增删改

      1.效果图 2.详细步骤解析 3.总结.代码   1.效果图 增 删除 改 2.详细步骤解析 1.构造增删改查url,反向解析 2.ModelForm定制add.edit页面 3.starak中的 ...

  4. Linux sudoers

    xxx is not in the sudoers file.This incident will be reported.的解决方法 - xiaochaoyxc - 博客园http://www.cn ...

  5. C# 父子页面传值

    业务需求是:父页面点击“选择任务”按钮进入任务列表页.(项目进度周报) 父页面如下: 任务列表页: 选择某一个任务,点击“确定”后返回父页面所需数据. 父页面“选择任务” 按钮触发事件. /// &l ...

  6. scp复制文件到远程服务器上

    scp -P 22 -r 2028792_www  root@120.79.172.45:/usr/local/src Linux scp命令用于Linux之间复制文件和目录. scp是 secure ...

  7. Flutter的Appbar

    actions → List一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示:对于不常用的菜单通常使用PopupMenuButto ...

  8. 非关系型数据库----MongoDB

    一.什么是MongoDB? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提 ...

  9. yield send 的一些使用细节

    其实日常中我们使用最多的是 return 很少会使用到 yield 去创造一个生成器.一般就是算算算 算完之后用 return 返回一把. 但是有些情况下 比如需要节约内存不需要一把全部返回,每次使用 ...

  10. Java多线程2:线程的使用及其生命周期

    一.线程的使用方式 1.继承Thread类,重写父类的run()方法 优点:实现简单,只需实例化继承类的实例,即可使用线程 缺点:扩展性不足,Java是单继承的语言,如果一个类已经继承了其他类,就无法 ...