如何在离子3中进行水平滚动 [英] how to do horizontal scroll in ionic 3

问题描述

查看我的

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

I have 10 names in the ion-scroll but it is coming to the next line like a paragraph.

这是我的.html代码。

here is my .html code.

<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工作的代码我面临这个问题我错过离子文件的离子滚动

this same piece of code used to work in ionic 2 after updating to ionic 3 i am facing this issue what i am missing ionic doc for ion-scroll

推荐答案

看起来像 ion滚动中的-row 包装项目。

It looks like ion-row within your scroll is wrapping the items.

尝试使用 nowrap attribute。

Try using nowrap attribute.

添加flex-wrap：nowrap。强制列为单行。

Adds flex-wrap: nowrap. Forces the columns to a single row.

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

这篇关于如何在离子3中进行水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！