好久没做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);
}
}
}
然后便大功告成了，是不是很简单？想再美化一下的自行调整吧。
