如何在离子3中进行水平滚动

Question

看我的

我在离子卷轴中有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;
    }
}

更新到离子3之后用于离子2的同一段代码我面临这个问题我错过了离子滚动的离子文档

Answer 1

它看起来像是ion-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>

Answer 2

这个简单的 CSS 样式将使您的工作更轻松地完成。将您的内容包含在 a 中div，并将以下样式添加到其中div。无论任何 Ionic 版本如何，这都应该有效。不过，我正在使用Ionic 5。

CSS/SCSS

.horizontal-scroll {
    overflow: auto;
    white-space: nowrap;
}

超文本标记语言

<div class="horizontal-scroll">
  <ion-chip>
    <ion-label>Java</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Node.js</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Fusion.js</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>React</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Redux</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Angular</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>JavaScript</ion-label>
  </ion-chip>
</div>

您可以在此处查看我创建的工作示例。