Ionic 移动设备的 Ionic 页脚中的 Home 按钮不可见，但上一个和下一个按钮可见。我需要帮助来解决这个问题

Question

我是 Ionic 移动应用程序的新手，并且使用最新版本的 Angular 和 Ionic（分别为 17.0.5 和 7.1.5）。为了导航，我添加了 3 个按钮（上一个、主页和下一个按钮），如下所示：

<ion-footer>
 <ion-toolbar>
  <ion-buttons slot="start" *ngIf="showPreviousButton()">
    <ion-button [routerLink]="['/previous']">
      <ion-icon name="arrow-back"></ion-icon>
    </ion-button>
  </ion-buttons>

  <ion-buttons slot="center">
    <ion-button [routerLink]="['/main']">
      <ion-icon name="home"></ion-icon>
    </ion-button>
  </ion-buttons>

  <ion-buttons slot="end" *ngIf="showNextButton()">
    <ion-button [routerLink]="['/next']">
      <ion-icon name="arrow-forward"></ion-icon>
    </ion-button>
  </ion-buttons>
 </ion-toolbar>
</ion-footer>

在app.component.html中。

“上一个”按钮和“下一个”按钮以及我在“app.component.ts”文件中使用各自方法检查的条件是可见的，但插槽“中心”中的主页按钮不可见。我尝试了很多方法，例如单独保留主页按钮等，但主页按钮仍然不可见。它具有所有功能，但“上一个”和“下一个”按钮仍然不可见。无法理解这个问题的原因。有人可以提供一些见解来解决这个问题吗？

开发控制台中没有需要修复的错误消息。我只保留主页按钮，删除其他按钮。将主页按钮移至其他页面，移动整个导航栏等。仍然重复相同的问题。

Answer 1

ion-buttons 没有 slot="center" 属性。这可能就是它没有出现的原因。

您需要自己将按钮居中。简单的方法是使用 ion-text-center 类。或者你可以使用flexbox等。

  <ion-footer>
  <ion-toolbar>
   <ion-buttons slot="start">
     <ion-button>
       <ion-icon name="arrow-back"></ion-icon>
     </ion-button>
   </ion-buttons>
 
   <div class="ion-text-center">
     <ion-button>
       <ion-icon name="home"></ion-icon>
     </ion-button>
    </div>
 
   <ion-buttons slot="end">
     <ion-button>
       <ion-icon name="arrow-forward"></ion-icon>
     </ion-button>
   </ion-buttons>
  </ion-toolbar>
 </ion-footer>

有关按钮放置的更多信息