Question

我有一个在每个根页面末尾都带有ion-footer的应用程序：

<ion-footer>
  <ipa-footer-buttons></ipa-footer-buttons>
</ion-footer>

<ipa-footer-button>是一个组件：

html ：

<ion-toolbar>
  <ion-buttons class="footer-buttons">
    <!--Main-->
    <button ion-button block color="icons-color" (click)="footerClick('MainTabsPage')">
      <div [ngClass]="{'active': currentPage == 'MainTabsPage', 'inactive': currentPage != 'MainTabsPage'}">
        <ion-icon name="md-home"></ion-icon>
        <label class="title-icon-footer">Main Page</label>
      </div>
    </button>


    <button ion-button block color="icons-color" (click)="footerClick('MyAccountTabsPage')">
      <div [ngClass]="{'active': currentPage == 'MyAccountTabsPage', 'inactive': currentPage != 'MyAccountTabsPage'}">
        <ion-icon name="md-person"></ion-icon>
        <label class="title-icon-footer">my Account</label>
      </div>
    </button>
  </ion-buttons>
</ion-toolbar>

组件 .ts：

constructor(private _app: App) {
    this._app.getRootNav().viewDidEnter.subscribe((next: ViewController) => {
      this.currentPage = next.name;
    })
  }
footerClick(page) {
    switch (page) {
      case 'MainTabsPage'://main page
        this._app.getRootNav().setRoot('main-tabs', {tabIndex: 0}, {updateUrl: true});
        break;
      case 'MyAccountTabsPage':
        this._app.getRootNav().setRoot('my-account-tabs', {tabIndex: 0}, {updateUrl: true});
        break;
    }
  }

因此，当我从“主页”导航到“我的帐户”页面时，停留在“主页”中的标签在myAccount页面中显示2秒钟，第二个问题是页脚中的按钮失去了颜色，我的意思是当我从一个按钮导航到另一个按钮时，我会更改活动对象的按钮颜色以表示用户现在所在的位置。但是2个按钮保持不变的颜色。

ionic（ Ionic CLI ）：4.0.2 离子框架：离子角3.9.2 @ ionic / app-scripts：3.2.0

有人知道出什么问题吗？

Answer 1

您尝试使用Ionic ion-tabs组件（doc here）吗？

它将自动管理有效/无效显示。从页面导航到另一个页面时，我也遇到了一些过渡问题，并通过删除动画效果解决了该问题。在您的情况下，它将如下所示：

this._app.getRootNav().setRoot('my-account-tabs', {tabIndex: 0}, {updateUrl: true, animate: false});

从2个根页面导航，每个页面都有显示2个不良行为的选项卡

1 个答案: