Question

我正在使用Ionic2，我需要一个带有2个选项的标签菜单，点击后，将用户发送到相关页面。这就是我所做的：

tabsexample.html

<ion-content padding>
<ion-tabs>
  <ion-tab [root]="tab1Root">First Page Tab</ion-tab>
  <ion-tab [root]="tab2Root">Second Page Tab</ion-tab>
</ion-tabs>
</ion-content>

我生成了相关页面， tabsexample.ts 是这样的：

import {FirstPage} from '../first-page/first-page';
import {SecondPage} from '../second-page/second-page';
export class tabsexamplePage {

  tab1Root = FirstPage;
  tab2Root = SecondPage;
  constructor(private navCtrl: NavController) {

  }

我得到的是没有标签文字的白条（First Page Tab和Second Page Tab）。此外，2个标签填满了整个屏幕的宽度，因此第二个标签位于第一个标签下方。

Answer 1

而不是这样做：

<ion-content padding>
<ion-tabs>
  <ion-tab [root]="tab1Root">First Page Tab</ion-tab>
  <ion-tab [root]="tab2Root">Second Page Tab</ion-tab>
</ion-tabs>
</ion-content>

只需包含ion-tabs元素，但不包含ion-content包装：

<ion-tabs>
  <ion-tab [root]="tab1Root">First Page Tab</ion-tab>
  <ion-tab [root]="tab2Root">Second Page Tab</ion-tab>
</ion-tabs>

离子选项卡无法正确显示

1 个答案: