ionic2 tabs使用 Modal底部tab彈出框
更新時間：2016年12月30日 15:00:35 作者：蘭色的fire
最近做了一個項目，其中要實現(xiàn)這樣的功能，在首頁底部中間的tab彈出一個頁面，而且是沒有底部欄的，而不是像平?；瑒拥囊粋€子頁面。其實實現(xiàn)方法很簡單，下面通過本文給大家介紹下
項目要實現(xiàn)一個功能，在首頁底部中間的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中顯示實現(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) {
}
實現(xiàn)call方法
call(){
let modal = this.modalCtrl.create(CallModalPage);
modal.present();
}
以上所述是小編給大家介紹的ionic2 tabs使用 Modal底部tab彈出框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
一句話控制框架的刷新2008-08-08
JavaScript裝飾器函數(Decorator)實例詳解
這篇文章主要介紹了JavaScript裝飾器函數(Decorator),結合實例形式分析了JavaScript裝飾器函數(Decorator)的功能、實現(xiàn)與使用方法,需要的朋友可以參考下2017-03-03
詳解JavaScript中typeof與instanceof用法
typeof用以獲取一個變量或者表達式的類型而instanceof用于判斷一個變量是否某個對象的實例，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
呵呵，發(fā)現(xiàn)只要幾行ＪＳ代碼就可實現(xiàn)css的壓縮與格式化，非常不錯。2009-12-12
這篇文章主要介紹了BootStrap實現(xiàn)輪播圖效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
異步是指進程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不用管其他進程的狀態(tài),下面這篇文章主要給大家介紹了關于JS異步編程方法的6種方案,需要的朋友可以參考下2023-01-01
在做web開發(fā)時候很多時候都需要即時監(jiān)聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的用戶體驗感,這篇文章主要給大家介紹了關于如何利用js實時監(jiān)聽input輸入框值的變化,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊圖片換背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
將json字符串轉換為json對象的方法。在數據傳輸過程中，json是以文本，即字符串的形式傳遞的，而JS操作的是JSON對象，所以，JSON對象和JSON字符串之間的相互轉換是關鍵2013-11-11
使用JS前端技術實現(xiàn)靜態(tài)圖片局部流動效果
本文使用前端開發(fā)技術，結合?SVG?和?CSS?來實現(xiàn)類似的液化流動效果，包含的知識點主要包括：mask-image?遮罩、feTurbulence?和?feDisplacementMap?濾鏡、filter?屬性、canvas?繪制方法、TimelineMax?動畫及input[type=file]?本地圖片資源加載，需要的朋友可以參考下2022-08-08