如何在ionic 3中进行水平滚动

look at my

我在离子卷轴中有 10 个名字，但它像段落一样进入下一行。

这是我的 .html 代码。

<ion-scroll scrollX="true" style="width:100vw; height:50px" >
        <ion-row class="headerChip">
          <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
          <ion-chip  (click)="changeData(tabName)">
          <ion-label  >{{tabName.languagename}}</ion-label>
          <div></div>
          </ion-chip>
          </div>
        </ion-row>
      </ion-scroll>

这是我的CSS

.headerChipGray{
    ion-chip.chip.chip-md{
        margin: 2px 2px 2px 2px;
        border-radius: 10px;
        border: 1px solid gray;
        background: white;
    }
    ion-chip.chip.chip-ios{
        margin: 2px 2px 2px 2px;
        border-radius: 10px;
        border: 1px solid gray;
        background: white;
    }
}

.headerChipGreen{

    ion-chip.chip.chip-md{
        margin: 2px 2px 2px 2px;
        border-radius: 10px;
        background: white;
        color: #A80C50;
        border: 1px solid #A80C50;
    }

    ion-chip.chip.chip-ios{
        margin: 2px 2px 2px 2px;
        border-radius: 10px;
        background: white;
        color: #A80C50;
        border: 1px solid #A80C50;
    }
}

更新到 ionic 3 后，这段代码曾在 ionic 2 中工作，我面临这个问题，我缺少 ion-scroll 的 ionic 文档

看起来像ion-row http://ionicframework.com/docs/api/components/grid/Row/你的卷轴里包裹着物品。

尝试使用nowrap属性。

添加 flex-wrap: nowrap。强制将列变为单行。

<ion-scroll scrollX="true" style="width:100vw; height:50px" >
  <ion-row nowrap class="headerChip">
    <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
    <ion-chip  (click)="changeData(tabName)">
    <ion-label  >{{tabName.languagename}}</ion-label>
    <div></div>
    </ion-chip>
    </div>
  </ion-row>
</ion-scroll>