項目要實現一個功能,在首頁底部中間的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彈出框,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持!
新聞熱點
疑難解答