ionic2 tabs使用 Modal底部tab弹出框


Posted in Javascript onDecember 30, 2016

 项目要实现一个功能,在首页底部中间的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 相关文章推荐
javascript 函数使用说明
Apr 07 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
JS实现改变HTML上文字颜色和内容的方法
Dec 30 #Javascript
jQuery中页面返回顶部的方法总结
Dec 30 #Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 #Javascript
JS实现全屏的四种写法
Dec 30 #Javascript
js设置文字颜色的方法示例
Dec 30 #Javascript
Node.js的Mongodb使用实例
Dec 30 #Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 #Javascript
You might like
php curl模拟post请求小实例
2013/11/13 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
js实现随机点名程序
2020/09/17 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
毕业自荐信
2013/12/16 职场文书
房屋租赁意向书
2014/04/01 职场文书
英语教育专业自荐信
2014/05/29 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
未婚证明书模板
2014/10/08 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
少年犯观后感
2015/06/11 职场文书
运动会5000米加油稿
2015/07/21 职场文书
《绝招》教学反思
2016/02/20 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Golang 对es的操作实例
2022/04/20 Golang
Hive日期格式转换方法总结
2022/06/25 数据库