app-myapp/app/tabs/tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom" class="custom-tab-bar">
    <ion-tab-button tab="tab1" class="custom-tab-button">
      <ion-icon name="home"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" class="custom-tab-button">
      <ion-icon name="chatbubbles"></ion-icon>
      <ion-label>动态</ion-label>
    </ion-tab-button>

    <!-- 占位符，用于保持加号按钮的位置居中 -->
    <ion-tab-button disabled class="placeholder-tab-button"></ion-tab-button>

    <ion-tab-button tab="tab4" class="custom-tab-button">
      <ion-icon name="people"></ion-icon>
      <ion-label>联系人</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" class="custom-tab-button">
      <ion-icon name="person"></ion-icon>
      <ion-label>我</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <!-- 加号按钮，点击展开更多选项 -->
  <ion-fab vertical="bottom" horizontal="center" slot="fixed" class="custom-fab">
    <ion-fab-button (click)="toggleOptions()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top" *ngIf="optionsVisible">
      <ion-fab-button (click)="selectOption('option1')">选项1</ion-fab-button>
      <ion-fab-button (click)="selectOption('option2')">选项2</ion-fab-button>
      <ion-fab-button (click)="selectOption('option3')">选项3</ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-tabs>