如何在Ionic 3中实现水平滚动

Question

看看我的

我在ion-scroll中有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 2中可以正常工作，但更新到ionic 3后，我遇到了这个问题。我错过了什么？请问有关ion-scroll的Ionic文档。

- Mohan Gopi

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>

- Suraj Rao

---

你的答案救了我。 - core114

Answer 2

这个简单的CSS样式可以让你的工作更加容易。将内容包装在一个div元素中，然后添加以下样式到该div中。这应该适用于任何Ionic版本，但我正在使用Ionic 5。 CSS/SCSS：

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

HTML

<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>

您可以在我创建的工作示例中这里进行查看。

- coderpc

---

加1，正确答案是这个，因为ion-scroll已经被弃用。 - Bhavesh Lathigara

@BhaveshLathigara 我整天都在自责，想知道为什么 ion-scroll 不起作用。 - Morgs

@Morgs 因为它已被弃用且我们无法使用。因此，我们必须接受没有其他线索的事实。上面的代码对我有效。 - Bhavesh Lathigara

哇，我真的很感激！这个解决方法太棒了。 - Bruno Freire