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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
JS模板实现方法
Apr 03 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
字符串反转_JavaScript
Apr 28 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
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
咖啡与水的关系
2021/03/03 冲泡冲煮
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
Python使用chardet判断字符编码
2015/05/09 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
公司门卫的岗位职责
2014/02/19 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记