Ionic 2 Tabs位于顶部和底部

Question

我想制作一个tabs component屏幕顶部有一些标签,底部有一些标签,是否有办法实现这一目标？

像这样的东西:

我尝试使用两个实例,但我无法实现它,我想它们之间的同步将非常困难.

有任何想法吗？

Answer 1

您也可以在页面顶部放置TabsComponent.假设您已经导入并声明了TabsComponent所有您需要做的是,将此属性添加到您的app.module.ts

imports: [
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'})
],

这实际上只允许您更改选项卡栏的位置.

Answer 2

您可以合并标签布局（底部的标签），并在每页顶部添加一个工具栏，其中包含一些细分受众群组件，如下所示：

<ion-header>
  <ion-toolbar>
    <ion-segment [(ngModel)]="topTab" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="bookmark">
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

这样，您将在底部（选项卡组件）具有标签，在顶部（具有分段的标题）具有标签。我不知道在您的应用程序上下文中是否有意义，但就UI而言，结果将与提供的屏幕截图非常相似。