顶部和底部的 Ionic 2 选项卡

Posted 2023-02-23

【中文标题】顶部和底部的 Ionic 2 选项卡

【英文标题】：Ionic 2 Tabs in the top and the bottom

【发布时间】：2017-04-25 06:36:21

【问题描述】：

我想做一个tabs component，它在屏幕顶部有一些标签，在底部有一些标签，有没有办法做到这一点？

类似这样的：

我尝试使用两个实例，但我做不到，我想在它们之间同步会非常困难。

有什么想法吗？

【问题讨论】：

我不明白你能解释一下吗

【参考方案1】：

如果您使用的是 Ionic 2 或 3，这就是方法-

打开src\app\app.module.ts文件 将tabsPlacement:'bottom' 作为对象值传递给 onicModule.forRoot() 函数。 将对象作为第二个参数传递。 可以使用'top' 代替'bottom' 出现在顶部 希望它对你有用！！！

代码source here。

【参考方案2】：

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

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

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

【参考方案3】：

您可以组合一个选项卡布局（底部的选项卡）并在每个页面的顶部添加一个工具栏，其中包含一些 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 而言，结果与提供的屏幕截图非常相似。

【讨论】：

嗯，可能，好主意！我没想到...谢谢您的快速回答

我认为在某些情况下使用segment 是个坏主意。例如，如果我想在每个选项卡中都有一个 http 请求，该请求仅在 ionViewDidLoad 之后被调用。即使不打开该段，此解决方案也会发送所有 http 请求。我有类似的情况，我选择了tabs inside tabs 方法，效果很好。我还有动画和其他离子页面回调仍然可用。