Ionic 3 水平滚动卡片

Posted 2023-03-13

【中文标题】Ionic 3 水平滚动卡片

【英文标题】：Ionic 3 horizontal scrolling cards

【发布时间】：2019-02-25 02:41:33

【问题描述】：

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

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

enter image description here

编辑：这是我尝试过的

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.

【问题讨论】：

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

【参考方案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/