Question

我有一个带有两个标签的标签组件。按钮是可点击的，单击按钮所在的位置正确显示选项卡内容，但按钮不可见。

<ion-header>
  <ion-navbar>
    <ion-title>{{coupon.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="coupon-image-container">
    <img src={{coupon.mainImage}}/>
    <button ion-button class="left">Redeem</button>
  </div>
  <ion-tabs class="coupon-tabs">
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
  </ion-tabs>
</ion-content>

我认为不需要任何其他代码，但如果需要，我会提供更多代码。就像我说mapTab和infoTab组件的内容显示正常，点击标签按钮应该在哪里切换它们，但按钮只是空白。

编辑：以防万一有人要问，如果我删除组件中的其他所有东西，除了像这样的标签组件，它仍然会做同样的事情：

<ion-tabs class="coupon-tabs">
  <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
  <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>

所以它绝对与其他内容无关。

编辑：我做了一个显示问题的GIF：http://g.recordit.co/WDkjkSz6re.gif

编辑：这里是离子标签

上的样式

element.style {
}
main.css:25224
.coupon-tabs ion-tab {
    color: black;
    top: 56px;
}
main.css:5136
ion-tab.show-tab {
    display: block;
}
main.css:5145
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
    contain: strict;
}
main.css:5132
ion-tab {
    display: none;
}
main.css:5128
ion-nav, ion-tab, ion-tabs {
    overflow: hidden;
}
main.css:5116
ion-app, ion-nav, ion-tab, ion-tabs, .app-root {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
Inherited from ion-tabs.coupon-tabs.tabs.tabs-md.tabs-md-primary
main.css:25219
.coupon-tabs {
    position: relative;
    color: black;
}
main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

Answer 1

查找类.tabbar并检查其不透明度。如果需要，可以更改它。

Answer 2

改为：

<ion-tab icon="ion-map" title="Map"></ion-tab>
<ion-tab icon="ion-ios-information" title="Info"></ion-tab>

执行此操作后，您可能已经注意到文本没有显示，但文本确实显示但是它位于图标下方并被overflow隐藏。您可能需要使用position: relative; top: -XXpx将文字移动一点，或者使父overflow: visible。

如果您没有使用typescript构建项目，我猜问题是tabTitle并且tabIcon未正确转换为上面的示例，或者如果我们正在构建此项目使用typescript然后它无法将属性转换为正确的方式。

希望有所帮助

I saw some other issues in google related to this

Answer 3

我的原因是因为我在类的顶部而不是构造函数中初始化了tabs属性

下面的这个不起作用。

export class TabsPage {
    tab1 = Page1;
    tab2 = Page2;

    constructor() {}
}

这个很好用。

export class TabsPage {

  tab1: any;
  tab2: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.tab1 = Page1;
    this.tab2 = Page2;
  }

}

此外，出于某些原因，尽管标签出现在DOM中，但标签仍未显示在屏幕上，可能是因为我在应用程序中嵌套了标签。因此必须将其添加到tabs-page.scss

.tabbar {
    opacity: 1;
}

选项卡按钮存在但不可见

3 个答案: