Question

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

非常感谢。您可以在这里尝试我所指的卡片： 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.

Answer 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;
}

有关更多信息，请参阅：

https://ionicframework.com/docs/api/components/slides/Slides/

Ionic 3水平滚动卡

1 个答案: