ionic2 tabs使用 Modal底部tab弹出框
来源:互联网 发布:苹果app移动数据下载 编辑:程序博客网 时间:2024/06/07 11:11
项目要实现一个功能,在首页底部中间的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,public modalCtrl: ModalController,public viewCtrl: ViewController) { }
- 实现call方法
call(){ let modal = this.modalCtrl.create(CallModalPage); modal.present(); }
大功告成!
0 0
- ionic2 tabs使用 Modal底部tab弹出框
- ionic3/2 使用modal自定义弹出框
- bootstrap modal弹出框
- angularjs 弹出框 $modal
- Modal弹出框
- angularjs 弹出框 $modal
- ionic2--tabs笔记
- ionic2 tabs 自定义图标
- ionic2/3 tabs控件
- ionic2 使用tabs+slides实现滑动切换页面效果
- ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法
- iOS 手动实现modal效果,从底部弹出一个控制器
- BottomSheetDialog底部弹出框、butterkoife使用
- 使用Activity做底部弹出框
- ionic2/ionic3自由隐藏底部tab栏---让ionic3自己解决!手把手教程
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
- android底部弹出框
- 底部弹出框
- 第21章 sed进阶
- C#VBA录制宏的控制类
- 面向对象之构造方法
- Android 6.0完美封装
- GCD-Sync
- ionic2 tabs使用 Modal底部tab弹出框
- eclipse在android项目导入所有包
- Hyperledger Fabric继peer启动之后的源码解析二
- 获取除去法定节假日的第二天日期
- iOS开发:给UIWebView导航栏添加返回与关闭按钮
- andriod 中.9.png图片 原理
- python 操作 excel
- 课程设计--通讯录
- 初始化mysql数据库提示缺少Data:dumper模块解决方法