ionic2 tabs使用 Modal底部tab弹出框
更新时间：2016年12月30日 15:00:35 作者：兰色的fire
最近做了一个项目，其中要实现这样的功能，在首页底部中间的tab弹出一个页面，而且是没有底部栏的，而不是像平常滑动的一个子页面。其实实现方法很简单，下面通过本文给大家介绍下
项目要实现一个功能，在首页底部中间的tab弹出一个页面，而且是没有底部栏的，而不是像平常滑动的一个子页面。
像这样：
做法其实很简单
1.修改tabs.html中的tab，去掉[root]="tab2root"属性，就不会显示子页面了
2.添加(ionSelect)方法，点击这个tab按钮的事件，用来显示你的弹出modal
去掉之前：
<ion-tab [root]="tab5Root" tabIcon="call" (ionSelect)="call()" ></ion-tab>
去掉之后：
<ion-tab tabIcon="call" (ionSelect)="call()" ></ion-tab>
3.在tabs.ts中显示实现(ionSelect)方法的call()方法，以显示modal
引入ModalController
import { NavController, NavParams,ModalController,ViewController,Tabs } from 'ionic-angular';
声明ModalController
constructor(public navCtrl: NavController, public navParams: NavParams,<span style="color:#ff0000;">public modalCtrl: ModalController,</span>public viewCtrl: ViewController) {
}
实现call方法
call(){
let modal = this.modalCtrl.create(CallModalPage);
modal.present();
}
以上所述是小编给大家介绍的ionic2 tabs使用 Modal底部tab弹出框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了javascript创建函数的20种方式汇总的相关资料,需要的朋友可以参考下2015-06-06
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，当然jquery也提供了这种蒙灰方法，下面有个示例，大家可以参考下2014-06-06
最近使用uniapp做了个APP,由于客户是巴西的,所以使用中文已经满足不了客户需求了,本打算直接使用英文开发算了,老板非要做成可以中英文切换的,没办法只能开干,需要的朋友可以参考下2023-11-11
本文通过实例代码给大家介绍了基于js实现浏览上传文件的代码，非常不错，代码简单易懂，具有参考借鉴价值，需要的朋友参考下吧2017-08-08
这篇文章主要介绍了JS返回只包含数字类型的数组实现方法,结合实例形式分析了循环遍历数组及正则匹配两种实现技巧,需要的朋友可以参考下2016-12-12
这篇文章主要给大家介绍了利用d3.js实现立体柱图的方法，文中给出了详细的介绍和示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-04-04
js汉字排序问题 支持中英文混排，兼容各浏览器，包括CHROME
这套排序机制同时兼容了IE和ff 可以实现所有浏览器下排序的统一哦2011-12-12
这篇文章主要给大家介绍了如何通过一篇文章弄懂ECMAScript中操作符的相关资料,其中包括一元操作符、布尔操作符、乘性操作符、加性操作符、关系操作符、相等操作符、条件操作符、赋值操作符 以及逗号操作符,需要的朋友可以参考下2021-07-07
这篇文章主要为大家介绍了JavaScript的内置对象Math和字符串，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要为大家详细介绍如何完美实现js选项卡切换效果，通过设置定时器实现延时0.5s切换选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论