显示离子段按钮，除了第一个按钮答案

【问题标题】：Ion segment buttons are shown except the first one显示离子段按钮，除了第一个按钮
【发布时间】：2019-12-05 19:53:16
【问题描述】：

我有一个带有他的 ion-segment-button 子元素的 ion-segment 元素，我的想法是制作一个水平滚动菜单，以在该部分中包含我想要放置的按钮数量。

在我的例子中，我使用 5 个按钮，每个季度 1 个（假设这是一场足球比赛），还有另一个按钮，EX 按钮，这个按钮用于加时赛（在其他运动的情况下）需要额外的时间）。

问题是我实现了使 ion-segment 可滚动并查看他的元素（从第 2 个到最后一个），但第一个 ion-segment-button 从未显示！（我认为离子段由于某种原因没有采用第一个元素......）。

事实上，我检查了所有按钮都有宽度和高度（确实如此），所以我觉得这有点奇怪......

HTML 结构：

<ion-footer>
  <ion-segment color="tertiary" value = "primer-cuarto" class = "scrollable-segment">

    <ion-segment-button value = "primer-cuarto" (click) = "selectSection('primer-cuarto')">
      <ion-label>1er cuarto</ion-label>
    </ion-segment-button>

    <ion-segment-button value = "segundo-cuarto" (click) = "selectSection('segundo-cuarto')">
      <ion-label>2do cuarto</ion-label>
    </ion-segment-button>

    <ion-segment-button value = "tercer-cuarto" (click) = "selectSection('tercer-cuarto')">
      <ion-label>3er cuarto</ion-label>
    </ion-segment-button>

    <ion-segment-button value = "cuarto-cuarto" (click) = "selectSection('cuarto-cuarto')">
      <ion-label>4to cuarto</ion-label>
    </ion-segment-button>

    <ion-segment-button value = "cuarto-extra" (click) = "selectSection('cuarto-extra')">
      <ion-label>Ex</ion-label>
    </ion-segment-button>
  </ion-segment>

</ion-footer>

一些css样式：

ion-segment{

    background: gainsboro;

}

ion-segment-button ion-icon{

    color: #7044ff;

}

ion-segment-button ion-label{

    word-break: break-word;

}

.scrollable-segment{
    overflow-x: scroll;
}

这就是我在 0 中获得的滚动条（完全向左）：

如您所见，第一季度从未显示...

【问题讨论】：

标签： html ionic-framework sass ionic4

【解决方案1】：

你需要给 ion-segment 添加一个可滚动的属性

例如。

<ion-segment (ionChange)="segmentChanged($event)" scrollable>

参考：https://ionicframework.com/docs/api/segment

【讨论】：