如何在 ionic 4 中水平滚动作为在 ionic 3 中工作的离子滚动？答案

【问题标题】：How to Horizontal scroll in ionic 4 as ion-scroll working in ionic 3?如何在 ionic 4 中水平滚动作为在 ionic 3 中工作的离子滚动？
【发布时间】：2019-02-21 03:18:24
【问题描述】：

我在 ionic 4 中尝试离子滚动但不起作用？我从 ionic 论坛获得了一些解决方案，使用 div 而不是弃用的 ion-scroll 但它对我不起作用。我需要在单行中滚动 X 卡项目。

【问题讨论】：

我需要泛化解决方案，以便在一个地方创建方法并在多个地方使用它。
我自己发现的。更有可能是一个通用的解决方案。可以参考答案here。

标签： angular ionic4

【解决方案1】：

我已经为 ionic 4 中的图像创建了水平可滚动图库。它对我来说非常好用！

.thumnails{
  overflow-x: scroll;
  overflow-y: hidden;
  .list-thumbnail{
    height: 100%;
    white-space: nowrap;
    .img-thumb{
      display: inline-block;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 3px;
      width: 50px;
      height: 50px;
      margin:0 2px 0 0; 
      line-height: 60px;
    }
    .selected-img{
      border: 2px solid color($colors, primary);
    }
  }
}
::-webkit-scrollbar { 
  display: none; 
}

<div class="thumnails">
  <div class="list-thumbnail">
    <div class="img-thumb" [class.selected-img]="x.selected" *ngFor="let x of images" (click)="onThumbnailClick(x)">
      <img [src]="x.image">
    </div>
  </div>
</div>

【讨论】：

您的解决方案有效，但我需要通用解决方案，以便我在一个地方创建并在多个地方使用它。实际上，我正在开发的应用程序在很多地方都需要这种水平滚动。您的解决方案就像您通过使用一些 css 属性实现的那样工作。
因此您可以为此创建指令并通过@Input 传递数据并在应用程序的任何位置使用。