好久沒做ionic3了，在簡書草稿箱發現這個閑置了很久將至一年的文章，遂發出來。

效果圖是這樣：

image.png

首先這是ios樣式修改的，所以在app.module.ts中指定為ios模式：

    IonicModule.forRoot(MyApp, {
      mode: 'ios'
    })

然后html部分：

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

注意，居中項不放tabTitle，這樣就只會有一個圖標，且自動有一個.icon-only樣式，而其他項是不會有這個樣式的。

然后針對這個樣式改寫scss部分，主要是設置圖標的大小、位置、邊框和背景:

.tabs-ios{
    .tab-button.icon-only{
        position:relative;
        overflow:visible;
        text-align:center;
        left:0;
        .tab-button-icon{
            width:70px;
            height:70px;
            line-height: 60px;
            margin-top: -12px;
            background:skyblue;
            border-radius:50%;
            border:5px solid #fff;
            box-shadow:0 -2px 3px rgba(100,100,100,.4);
        }
    }
}

然后便大功告成了，是不是很簡單？想再美化一下的自行調整吧。