angular - 在选项卡 IONIC 3 之间导航的最佳方法是什么

Question

在同一页面中的选项卡 IONIC 3 之间导航的最佳方法是什么。

我有一个名为“任务”的页面，它有两个主要选项卡：

• 我的任务
• 所有任务

每个选项卡都应该返回与另一个不同的视图，那么当我在“任务”页面上时，在这些选项卡的视图之间切换的最佳方式是什么？

这是一张图片显示了我所拥有的

提前致谢

标签： angularionic-frameworktabsnavigationionic3

Answer 1

我认为离子段将完成您的要求。这是一个小例子，或者您可以参考文档

<div class="bar bar-header bar-dark">

  <ion-segment ng-model="categories" full="true"  assertive>
  <ion-segment-button value="movies">
    Movies
  </ion-segment-button>
  <ion-segment-button value="series">
    Series
  </ion-segment-button>
  <ion-segment-button value="animation">
    Animate
  </ion-segment-button>

</ion-segment>
  </div>
<ion-content class="has-header">

  <div ng-switch="categories">

    <ion-list ng-switch-when="movies">
      <ion-item>
        Batman Begins
      </ion-item>
      <ion-item>
        Transporter
      </ion-item>
      <ion-item>
        Million Dollar Baby
      </ion-item>
    </ion-list>

    <ion-list ng-switch-when="series">
      <ion-item>
        Game of Thrones
      </ion-item>
      <ion-item>
        Daredevil
      </ion-item>
      <ion-item>
        Arrow
      </ion-item>
    </ion-list>
    <ion-list ng-switch-when="animation">
      <ion-item>
        Ice Age
      </ion-item>
      <ion-item>
        Lion King
      </ion-item>
      <ion-item>
        Up
      </ion-item>
    </ion-list>

  </div>
</ion-content>