ionic4底部Tab居中圆形凸出按钮

先前写过一篇文章：

【技巧】ionic3底部Tab居中圆形凸出按钮

里面很简单地就实现了，那在ionic4中又是如何实现呢？也是很简单的。

实现

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

说明

留意html里面有这么一部分：

  <ion-tab-button hidden>
  </ion-tab-button>

这是用来占位的，理论上应该给它写样式实现圆形凸出效果，但是它会被约束在父元素上，高度溢出不好操作，所以改为仅做占位使用，额外的用另一个<ion-tab-button>覆盖其上。