Ionic 3 水平滚动卡片答案

【问题标题】：Ionic 3 horizontal scrolling cardsIonic 3 水平滚动卡片
【发布时间】：2019-02-25 02:41:33
【问题描述】：

我正在尝试制作像图像中的那样水平滚动的卡片。有谁知道如何做到这一点？无论图像本身的大小如何，我都需要卡片具有相同的高度。

非常感谢。你可以试试我的意思是这里的卡片： https://www.appimin.com/

编辑：这是我尝试过的

slider.html

<ion-scroll scrollX="true" direction="x">
    <ion-card *ngFor="let dat of data">
      <img [src]="dat.attachments[0]" style="object-fit: cover;"/>
      <ion-card-content>
        <p>
          {{ dat.title }}
        </p>
      </ion-card-content>
    </ion-card>
  </ion-scroll>

slider.ts

.scroll-zoom-wrapper {
    white-space: nowrap;
}

ion-card {
    width: 220px !important;
    display: inline-block;
    max-height: 100% !important;
}

ion-scroll {
    min-height: 200px; 
    height: auto;

        .scroll-content {
        padding: 0px !important;
    }    

}

This is what I got. It scrolls fine, but all of them are different heights.

【问题讨论】：

你应该继续发布你已经尝试过的代码，不要害羞:)

标签： angular typescript sass ionic3

【解决方案1】：

您可以为此使用离子载玻片：

<ion-slides>
  <ion-slide>
    <ion-card>
      <h1>Slide 1</h1>
    </ion-card> 
  </ion-slide>
  <ion-slide>
    <ion-card>
      <h1>Slide 2</h1>
    </ion-card>
  </ion-slide>
  <ion-slide>
    <ion-card>
      <h1>Slide 3</h1>
    </ion-card>
  </ion-slide>
 </ion-slides>

你可以使用简单的 css 来获得正确的高度：

.card {
   height: 10vh;
}

【讨论】：