ionic2 tabs使用 Modal底部tab彈出框
更新時(shí)間：2016年12月30日 15:00:35 作者：蘭色的fire
最近做了一個(gè)項(xiàng)目，其中要實(shí)現(xiàn)這樣的功能，在首頁(yè)底部中間的tab彈出一個(gè)頁(yè)面，而且是沒(méi)有底部欄的，而不是像平?；瑒?dòng)的一個(gè)子頁(yè)面。其實(shí)實(shí)現(xiàn)方法很簡(jiǎn)單，下面通過(guò)本文給大家介紹下
項(xiàng)目要實(shí)現(xiàn)一個(gè)功能，在首頁(yè)底部中間的tab彈出一個(gè)頁(yè)面，而且是沒(méi)有底部欄的，而不是像平?；瑒?dòng)的一個(gè)子頁(yè)面。
像這樣：
做法其實(shí)很簡(jiǎn)單
1.修改tabs.html中的tab，去掉[root]="tab2root"屬性，就不會(huì)顯示子頁(yè)面了
2.添加(ionSelect)方法，點(diǎn)擊這個(gè)tab按鈕的事件，用來(lái)顯示你的彈出modal
去掉之前：
<ion-tab [root]="tab5Root" tabIcon="call" (ionSelect)="call()" ></ion-tab>
去掉之后：
<ion-tab tabIcon="call" (ionSelect)="call()" ></ion-tab>
3.在tabs.ts中顯示實(shí)現(xiàn)(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) {
}
實(shí)現(xiàn)call方法
call(){
let modal = this.modalCtrl.create(CallModalPage);
modal.present();
}
以上所述是小編給大家介紹的ionic2 tabs使用 Modal底部tab彈出框，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript創(chuàng)建函數(shù)的20種方式匯總
這篇文章主要介紹了javascript創(chuàng)建函數(shù)的20種方式匯總的相關(guān)資料,需要的朋友可以參考下2015-06-06
使用原生js實(shí)現(xiàn)頁(yè)面蒙灰(mask)效果示例代碼
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當(dāng)然jquery也提供了這種蒙灰方法，下面有個(gè)示例，大家可以參考下2014-06-06
最近使用uniapp做了個(gè)APP,由于客戶(hù)是巴西的,所以使用中文已經(jīng)滿(mǎn)足不了客戶(hù)需求了,本打算直接使用英文開(kāi)發(fā)算了,老板非要做成可以中英文切換的,沒(méi)辦法只能開(kāi)干,需要的朋友可以參考下2023-11-11
本文通過(guò)實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)瀏覽上傳文件的代碼，非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-08-08
JS返回只包含數(shù)字類(lèi)型的數(shù)組實(shí)例分析
這篇文章主要介紹了JS返回只包含數(shù)字類(lèi)型的數(shù)組實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了循環(huán)遍歷數(shù)組及正則匹配兩種實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了利用d3.js實(shí)現(xiàn)立體柱圖的方法，文中給出了詳細(xì)的介紹和示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。2017-04-04
js漢字排序問(wèn)題 支持中英文混排，兼容各瀏覽器，包括CHROME
這套排序機(jī)制同時(shí)兼容了IE和ff 可以實(shí)現(xiàn)所有瀏覽器下排序的統(tǒng)一哦2011-12-12
這篇文章主要給大家介紹了如何通過(guò)一篇文章弄懂ECMAScript中操作符的相關(guān)資料,其中包括一元操作符、布爾操作符、乘性操作符、加性操作符、關(guān)系操作符、相等操作符、條件操作符、賦值操作符 以及逗號(hào)操作符,需要的朋友可以參考下2021-07-07
JavaScript的內(nèi)置對(duì)象Math和字符串詳解
這篇文章主要為大家介紹了JavaScript的內(nèi)置對(duì)象Math和字符串，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(二)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果，通過(guò)設(shè)置定時(shí)器實(shí)現(xiàn)延時(shí)0.5s切換選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03