ionic 2（水平）中的可滚动段答案

【问题标题】：scrollable segments in ionic 2 (horizontal)ionic 2（水平）中的可滚动段
【发布时间】：2017-07-14 20:31:23
【问题描述】：

我正在尝试使用 ionic2 中的段进行水平滚动。代码如下：

home.ts:

<ion-scroll scrollX="true" style="width:100vw;height:350px" >
<ion-segment [(ngModel)]="relationship" color="primary">


      <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
        Friends
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
       <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>

    </ion-segment>
      </ion-scroll>

根据this文档，我在离子段之外使用了离子滚动，所以我得到了这样的用户界面。

如何根据姓名的长度使我的姓名可见并且仅显示 3 到 4 个姓名。用户滚动后，它应该一个一个地显示下一个名称。

【问题讨论】：

标签： angular scroll ionic2 segment

【解决方案1】：

ion-segment {
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        display: inline-block;
        min-width: 100px;
        width: auto;
    }
}

工作正常

【讨论】：

【解决方案2】：

此解决方案适用于 Ionic2，因此该解决方案仅适用于 Ionic2

ion-segment {
    justify-content: space-between;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        flex: 1 0 100px;
    }
}

如果你想要固定宽度的标签，如果你想要不同的宽度，你应该从 flex 切换到 block/inline-block

ion-segment {
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        display: inline-block;
        min-width: 100px;
        width: auto;
    }
}

这里是各种宽度的标签

如 Suraj 的解决方案中所述找到github讨论链接here

【讨论】：