这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近做了一个项目,其中要实现这样的功能,在首页底部中间的 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 弹出框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0602/328982.html