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

Posted 2023-03-06

【中文标题】如何在ionic 3中进行水平滚动

【英文标题】：how to do horizontal scroll in ionic 3

【发布时间】：2017-10-04 16:27:03

【问题描述】：

看看我的

我在 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 3 后，这段代码曾在 ionic 2 中工作，我正面临这个问题，我缺少用于 ion-scroll 的 ionic doc

【参考方案1】：

这种简单的 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>

您可以查看here 了解我创建的工作示例。

【讨论】：

加 1，正确答案是这个 bcz ion-scroll 已弃用

@BhaveshLathigara 我整天都在这里打自己，想知道为什么ion-scroll 不起作用

@Morgs 因为它已被弃用，我们无法使用。所以我们没有接受其他线索。上面的代码对我有用。

【参考方案2】：

看起来你的卷轴中的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>

【讨论】：

你的答案救了我