离子 4 中可水平滚动的卡片

Question

我正在使用 ionic 4，我想得到如下图所示的结果：

Answer 1

您可能想要探索ion-slides作为此类卡片滚动的基础：

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>
            Ionic 4 template
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-slides [options]="{ slidesPerView: 'auto', zoom: false, grabCursor: true }">
    <ion-slide *ngFor="let card of [0,1,2,3,4,5,6]" style="width: 150px; height: 200px; border: 2px solid #f8f8f8">
      <ion-col>
        <ion-label>Card #{{ card }}</ion-label>
        <ion-img style="pointer-events:none" src="https://via.placeholder.com/150"></ion-img>
      </ion-col>
    </ion-slide>
  </ion-slides>
</ion-content>

可编辑演示：https : //stackblitz.com/edit/ionic-4-template-oapfyt