选项卡按钮存在但不可见答案

【问题标题】：Tab buttons exist but are not visible选项卡按钮存在但不可见
【发布时间】：2018-10-23 02:16:14
【问题描述】：

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

<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

编辑：这是 ion-tab 上的样式

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;
}

【问题讨论】：

可能是优惠券标签类？
@ZhangBruce 目前还没有设置任何属性。
这很奇怪，我有完全相同的代码，但在 ion-tabs 中有一个 color="white" 属性
我们可以有一个工作的plunker吗？
@Sampath 好吧，我试过了...plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue 但我根本无法让它工作。我从来没有用过 plunker。

标签： ionic2 ionic3

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：

我试过你的代码，标签按钮仍然是空白的，但正如你所说，标签内容不再可见。究竟我需要在哪些元素上更改这些属性？此外，tabview 现在变得太高并导致屏幕滚动，并且选项卡内容区域是空白的，并且在检查元素中只显示一个空的 div。我正在使用打字稿。
基于 tab.ts in Ionic2 source tabTitle 和 tabIcon 应该是正确的，因为有类型字符串。你试过tabTitle="'Info'" tabIcon="'ion-ios-information'"吗？像以前一样使用引号，它正在寻找一个名为 Info 的变量，带引号你只是直接向它发送数据。
刚刚尝试在此处添加引号，但没有任何改变。而且它们可能本来就应该在那里，因为它们不是变量。
除非我看到源代码inspect element thingy 以了解 DOM 中发生了什么，否则我无法再猜测发生了什么。我认为创建自己的tabs 会更好，只需复制ion-tab 的布局即可。发生了什么是组件ion-tab 无法识别@Input attribute tabIcon / tabTitle，或者它无法识别@Input attributes 的值，或者@Component <ion-tab> 有问题。
我正在尝试用打字稿版本复制问题，希望能找到原因

【解决方案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 中，可能是因为我的应用程序中有嵌套的选项卡。所以不得不在 tabs-page.scss 中添加这个

.tabbar {
    opacity: 1;
}

【讨论】：