用离子幻灯片显示电影数组答案

【问题标题】：Showing movies array with ion-slide用离子幻灯片显示电影数组
【发布时间】：2021-05-01 03:28:00
【问题描述】：

我正在使用一个应用程序，我想使用 ion-slide 组件显示一系列电影。我想像 Netflix 应用一样呈现电影，这样电影都在同一行，用户可以水平滚动。使用 ions-lider 已经成功了，但是它的样式根本不起作用。电影图像由外部 API 提供，大小不一，但高度和高度比例相同。问题是：

电影图像显示的高度不同。
它们彼此靠得太近，以至于彼此重叠。

我尝试使用自定义 scss 规则而不是默认的 ion-img 组件样式规则，但结果更糟。现在我默认拥有它，似乎唯一的问题是滑块配置。

我拥有它的方式是，对于电影数组，我创建了一个离子幻灯片，并且在数组中的每个电影都有一个迭代，我称之为绑定电影对象的组件，该组件渲染电影图像和电影标题。

我的做法是这样的：

我有一个数组，其中该数组上的每个元素都是一个对象，其中包含一个电影集合，该集合具有该集合的名称、该集合所有者的 id 和一个 id 电影数组。
对于数组的每个元素，我调用了一个名为 collection 的组件，该组件获取一个集合并呈现集合的标题并遍历电影 ID，从 API 中检索有关电影的完整信息。
在集合组件中，当我检索到所有电影信息后，我会使用一个名为 movie-poster 的组件渲染电影图像和标题，该组件会渲染电影图像和电影标题。

这是我渲染所有集合的地方：

   <ion-row *ngIf="reference === 'collections'">
      <ion-col size='12' *ngFor='let collection of results?.collections'>
        <app-collection [collection]='collection'></app-collection>
      </ion-col>
    </ion-row>

这是集合组件：

<ion-slides [options]='slideOpts'>
    <ion-slide *ngFor='let movie of movies'>
      <app-movie-poster [movie]='movie'></app-movie-poster>
    </ion-slide>
  </ion-slides>

离子幻灯片配置：

slideOpts = {
    slidesPerView: 3.5,
    spaceBetween: 50,
    autoHeight: true
  }

还有电影海报组件：

<ion-img [src]='movie.poster_path | posterImg' (click)='getDetails(movie)'></ion-img>

<h3>
  {{ movie.title }}
</h3>

我在使用的任何组件上都没有任何 scss 规则。这就是我想要放映的电影：

这就是它现在的显示方式：

【问题讨论】：

请同时发布您的 SCSS 或 CSS。您可能无法穿透 shadow DOM。 stackoverflow.com/questions/61404848/…
我没有这些文件

标签： angular ionic-framework ion-slides

【解决方案1】：

我终于找到了解决办法。无需设置任何图像宽度或高度，只需设置每个视图的幻灯片数量，离子滑块之间的空间会自动设置图像大小。这是我的滑块配置：

slideOpts = {
    slidesPerView: 2.5,
    spaceBetween: 10,
    autoHeight: true
  }

【讨论】：