新建一個(gè)頁(yè)面用于放置tabs
首先打開命令提示符進(jìn)入到項(xiàng)目中病梢，然后輸入
ionic g page TabsPage
這個(gè)將用于放置底部導(dǎo)航欄
修改tabs.html
我是刪掉該文件中所有的內(nèi)容拓萌，然后輸入（因具體項(xiàng)目而定返干，可以不用和我一樣效果）
<ion-tabs>
<ion-tab tabIcon="aperture" tabTitle="一瞬" [root]="tab1Root" [rootParams]="userInfo"></ion-tab>
<ion-tab tabIcon="md-bus" tabTitle="旅行" [root]="tab2Root" [rootParams]="userInfo"></ion-tab>
<ion-tab tabIcon="md-images" tabTitle="分享" [root]="tab3Root" [rootParams]="userInfo"></ion-tab>
<ion-tab tabIcon="md-person" tabTitle="我的" [root]="tab4Root" [rootParams]="userInfo"></ion-tab>
</ion-tabs>
tabIcon是圖標(biāo)的樣式掠械，tabTitle是各個(gè)標(biāo)簽的文字，默認(rèn)是圖標(biāo)在上汗盘，文字在下皱碘，[root]是給各個(gè)標(biāo)簽的"name"，[rootParams]是用來(lái)接收參數(shù)用（暫時(shí)沒(méi)怎么仔細(xì)了解隐孽，目前就是用它來(lái)接受其他頁(yè)面?zhèn)鱽?lái)的參數(shù)癌椿，可不寫）
從其他頁(yè)面跳轉(zhuǎn)到tabs當(dāng)中
這次我們回到HomePage部分操作，給button附上點(diǎn)擊事件(click)菱阵，在home.ts文件中給函數(shù)添加
this.navCtrl.setRoot(TabsPage);
或者
this.navCtrl.push(TabsPage);
給各個(gè)tab附上頁(yè)面
我這邊做了4個(gè)tab踢俄，所以需要額外新增4個(gè)頁(yè)面，這里不做細(xì)說(shuō)送粱，自行操作褪贵。
添加以下代碼：
tab1Root = OnsecondPage;
tab2Root = TravelPage;
tab3Root = ListPage;
tab4Root = PersonPage;
OnsecondPage等等都是我自己新增的頁(yè)面掂之，每個(gè)頁(yè)面都可以做其他事情抗俄，這樣就是完成了android底部導(dǎo)航欄的效果了脆丁，當(dāng)然，千萬(wàn)別忘了在app.module.ts當(dāng)中添加TabsPage和后來(lái)新增的頁(yè)面進(jìn)去
PS：實(shí)現(xiàn)跳轉(zhuǎn)到TabsPage的某一個(gè)特定的界面动雹，比如最上面的效果圖槽卫，當(dāng)從LoginPage跳轉(zhuǎn)到TabsPage的時(shí)候，默認(rèn)是跳轉(zhuǎn)到“一瞬”這個(gè)tab的胰蝠，如果要默認(rèn)跳轉(zhuǎn)到其他的tab歼培，則需要添加selectedIndex="？"茸塞，問(wèn)號(hào)是tab的位置躲庄，例如：
<ion-tabs selectedIndex="2">
<ion-tab tabIcon="aperture" tabTitle="一瞬" [root]="tab1Root" [rootParams]="userInfo"></ion-tab>
<ion-tab tabIcon="md-bus" tabTitle="旅行" [root]="tab2Root" [rootParams]="userInfo"></ion-tab>
<ion-tab tabIcon="md-images" tabTitle="分享" [root]="tab3Root" [rootParams]="userInfo"></ion-tab>
<ion-tab tabIcon="md-person" tabTitle="我的" [root]="tab4Root" [rootParams]="userInfo"></ion-tab>
</ion-tabs>
當(dāng)我將數(shù)值改為2的時(shí)候，就表示從LoginPage跳轉(zhuǎn)到TabsPage時(shí)钾虐，是直接跳轉(zhuǎn)到“分享”這個(gè)tab
后言
初學(xué)ionic噪窘，發(fā)現(xiàn)這里面還是有很多的和原生android開發(fā)不一樣的地方，像這次的tab效扫，也是慢慢摸索了許久倔监，和小組的其他成員一起摸索出來(lái)的，希望大家也能把自己的經(jīng)驗(yàn)一起分享分享
