Ionic 2 Tabs位于顶部和底部

Question

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

这样的事情：

我尝试使用两个实例，但我无法实现它，我想它们之间很难同步。

任何想法？

Answer 1

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

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

这实际上只允许您更改标签栏的位置。

Answer 2

您可以组合标签布局（底部的标签），并在每个页面顶部添加一个工具栏，其中包含以下几个Segment组件：

<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而言，结果与提供的屏幕截图非常相似。

Answer 3

如果您正在使用Ionic 2或3，那么就是

1. 打开src\app\app.module.ts档案
2. 将tabsPlacement:'bottom'作为对象值传递给 onicModule.forRoot()功能。
3. 将对象作为第二个参数传递。
4. 可以使用'top'代替'bottom'出现在顶部
   希望它对你有用!!!

代码source here。