Ionic的页面堆栈与Tabs菜单相遇的问题(页面堆栈有多个)
本来的需求:
新建的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菜单相遇的问题(页面堆栈有多个)的更多相关文章
- 关于easyUI 的tabs 在子页面增加显示tabs的一个问题
在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php现在说的是在子页面点个按钮也能触发增 ...
- 关于easyUI在子页面增加显示tabs的一个问题
在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php 现在说的是在子页面点个按钮也能触发 ...
- Page Scroll Menu (页面中锚点菜单)
Technorati 标签: Page Scroll Menu,页面锚点菜单,Menu,Too Long,页面太长 当页面太长时,会导致浏览不便,这时就需要一个页面锚点菜单(Page Scroll ...
- 【BUG】---ionic tab-demo项目在modal页跳转URL改变页面不刷新,手动刷新后显示空白
问题描述: 项目是基于ionic tab的demo,在modal上访问其他页面,地址栏变化了,但是页面不动没刷新,自己手动刷新呢,还是空白,可是访问的页面时有内容的啊 错误: 我的路由配置 .stat ...
- ionic3之自定义tabs菜单图标
请参考以下链接 ionic3之自定义tabs菜单图标
- asp页面快速找到菜单按钮转向的页面的方法
asp页面快速找到菜单按钮转向的页面的方法: 鼠标放在按钮上,右键属性即可查看
- EasyUI-子页面增加显示tabs的一个问题
在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php现在说的是在子页面点个按钮也能触发增 ...
- js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享
禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
随机推荐
- zabbix安装与配置
一.什么是zabbix及优缺点(对比cacti和nagios) Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题.是一个基于WE ...
- H5 24-CSS三大特性之继承性
24-CSS三大特性之继承性 我是段落 我是段落 我是超链接 我是大标题 <!DOCTYPE html> <html lang="en"> <head ...
- stark组件的增删改
1.效果图 2.详细步骤解析 3.总结.代码 1.效果图 增 删除 改 2.详细步骤解析 1.构造增删改查url,反向解析 2.ModelForm定制add.edit页面 3.starak中的 ...
- Linux sudoers
xxx is not in the sudoers file.This incident will be reported.的解决方法 - xiaochaoyxc - 博客园http://www.cn ...
- C# 父子页面传值
业务需求是:父页面点击“选择任务”按钮进入任务列表页.(项目进度周报) 父页面如下: 任务列表页: 选择某一个任务,点击“确定”后返回父页面所需数据. 父页面“选择任务” 按钮触发事件. /// &l ...
- scp复制文件到远程服务器上
scp -P 22 -r 2028792_www root@120.79.172.45:/usr/local/src Linux scp命令用于Linux之间复制文件和目录. scp是 secure ...
- Flutter的Appbar
actions → List一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton 来表示:对于不常用的菜单通常使用PopupMenuButto ...
- 非关系型数据库----MongoDB
一.什么是MongoDB? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提 ...
- yield send 的一些使用细节
其实日常中我们使用最多的是 return 很少会使用到 yield 去创造一个生成器.一般就是算算算 算完之后用 return 返回一把. 但是有些情况下 比如需要节约内存不需要一把全部返回,每次使用 ...
- Java多线程2:线程的使用及其生命周期
一.线程的使用方式 1.继承Thread类,重写父类的run()方法 优点:实现简单,只需实例化继承类的实例,即可使用线程 缺点:扩展性不足,Java是单继承的语言,如果一个类已经继承了其他类,就无法 ...