先前寫過一篇文章：
里面很簡單地就實現(xiàn)了房铭，那在ionic4中又是如何實現(xiàn)呢囚似？也是很簡單的哪自。
實現(xiàn)
html部分：
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="today"></ion-icon>
<ion-label>運輸信息</ion-label>
</ion-tab-button>
<ion-tab-button hidden>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="subway"></ion-icon>
<ion-label>開始運輸</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tab-button tab="tab2" class="center-tab">
<ion-icon name="barcode"></ion-icon>
</ion-tab-button>
</ion-tabs>
樣式部分：
ion-tab-button.center-tab{
position: absolute;;
overflow: visible;
text-align: center;
height: 96px;
width: 96px;
left: 0;
right: 0;
margin: auto;
bottom: -14px;
z-index: 99999;
ion-icon{
padding: 6px;
width: 40px;
height: 40px;
line-height: 40px;
color: var(--ion-color-white, #fff);
background-color: var(--ion-color-primary, #9b7af3);
border-radius:50%;
border:5px solid #fff;
box-shadow:0 -2px 3px rgba(100,100,100,.4);
}
}
這樣就大功告成了！看下效果：
image.png
如果想實現(xiàn)點擊時不同效果流椒，可以把上面的背景色改一下，再額外添加選中時的樣式：
ion-tab-button.center-tab.tab-selected {
ion-icon {
background-color: var(--ion-color-primary, #9b7af3);
}
}
說明
留意html里面有這么一部分：
<ion-tab-button hidden>
</ion-tab-button>
這是用來占位的明也，理論上應該給它寫樣式實現(xiàn)圓形凸出效果宣虾，但是它會被約束在父元素上，高度溢出不好操作温数，所以改為僅做占位使用安岂，額外的用另一個<ion-tab-button>覆蓋其上。
