显示带有 ion-slide 的电影数组

Question

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

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

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

我的方法是，对于电影数组，我创建了一个 ion-slides，在数组中的每部电影都有一个迭代，我称之为绑定电影的组件 object，该组件呈现电影图像和电影标题。

我的做法如下：

我有一个数组，其中此数组中的每个元素都是一个 object，其中包含 collection 部电影，其名称为 collection，以及电影所有者的 ID collection 和一组 id 的电影。
对于数组的每个元素，我调用一个名为 collection 的组件，此组件获取 collection 并呈现 collection 的标题并遍历电影 ID 以检索来自 API.
在 collection 组件内，当我检索到所有电影信息后，我使用名为 movie-poster 的组件渲染电影图像和标题，该组件渲染电影图像和电影标题。

这是我渲染所有 collection 的地方：

   <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>

这是 collection 组件：

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

和ions-slides配置：

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

和 movie-poster 组件：

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

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

我使用的任何组件都没有任何 scss 规则。这就是我尝试放映的电影：

这是目前的显示方式：

Answer 1

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

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

显示带有 ion-slide 的电影数组

Showing movies array with ion-slide

ionic-framework

ion-slides

angular