angular - ionic 2 中的可滚动段(水平)

Question

我正在尝试使用 ionic2 中的段进行水平滚动。这是代码:

主页.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 document，我在 ion-segment 之外使用了 ion-scroll，所以我得到了这样的 UI。

How can I make my name visible depending upon the length of the name and show only 3 to 4 names. After the user scroll, it should show the next names one by one.

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

工作正常