选项卡按钮存在但不可见

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

查找 class .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那么它无法将属性转换为正确的方式。

希望有帮助

我在谷歌上看到了与此相关的其他一些问题

Answer 3

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

下面的这个不起作用。

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 中，可能是因为我在我的应用程序中嵌套了选项卡。所以不得不在标签页中添加这个.scss

.tabbar {
opacity: 1;
}