ionic2 tabs使用 Modal底部tab彈出框
項(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)文章
一句話控制框架的刷新2008-08-08
JavaScript裝飾器函數(shù)(Decorator)實(shí)例詳解
這篇文章主要介紹了JavaScript裝飾器函數(shù)(Decorator),結(jié)合實(shí)例形式分析了JavaScript裝飾器函數(shù)(Decorator)的功能、實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2017-03-03
詳解JavaScript中typeof與instanceof用法
typeof用以獲取一個(gè)變量或者表達(dá)式的類型而instanceof用于判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-10
用于CSS代碼壓縮與格式化的javascript函數(shù)代碼
呵呵，發(fā)現(xiàn)只要幾行ＪＳ代碼就可實(shí)現(xiàn)css的壓縮與格式化，非常不錯(cuò)。2009-12-12
BootStrap實(shí)現(xiàn)輪播圖效果(收藏)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)輪播圖效果,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
異步是指進(jìn)程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不用管其他進(jìn)程的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于JS異步編程方法的6種方案,需要的朋友可以參考下2023-01-01
如何利用js實(shí)時(shí)監(jiān)聽input輸入框值的變化
在做web開發(fā)時(shí)候很多時(shí)候都需要即時(shí)監(jiān)聽輸入框值的變化,以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感,這篇文章主要給大家介紹了關(guān)于如何利用js實(shí)時(shí)監(jiān)聽input輸入框值的變化,需要的朋友可以參考下2024-02-02
JavaScript實(shí)現(xiàn)點(diǎn)擊圖片換背景
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊圖片換背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
js 將json字符串轉(zhuǎn)換為json對(duì)象的方法解析
將json字符串轉(zhuǎn)換為json對(duì)象的方法。在數(shù)據(jù)傳輸過(guò)程中，json是以文本，即字符串的形式傳遞的，而JS操作的是JSON對(duì)象，所以，JSON對(duì)象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵2013-11-11
使用JS前端技術(shù)實(shí)現(xiàn)靜態(tài)圖片局部流動(dòng)效果
本文使用前端開發(fā)技術(shù)，結(jié)合?SVG?和?CSS?來(lái)實(shí)現(xiàn)類似的液化流動(dòng)效果，包含的知識(shí)點(diǎn)主要包括：mask-image?遮罩、feTurbulence?和?feDisplacementMap?濾鏡、filter?屬性、canvas?繪制方法、TimelineMax?動(dòng)畫及input[type=file]?本地圖片資源加載，需要的朋友可以參考下2022-08-08