显示带有 ion-slide

如何解决显示带有 ion-slide

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

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

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

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

我的做法如下：

1. 我有一个数组，其中该数组上的每个元素都是一个对象，其中包含一个电影集合，该集合具有该集合的名称、该集合所有者的 ID 以及一个 id 的电影数组。
2. 对于数组的每个元素，我调用一个名为 collection 的组件，该组件获取一个集合并呈现集合的标题，并遍历电影 ID，从 API 检索有关电影的完整信息。立>
3. 在集合组件中，当我检索到所有电影信息后，我会使用一个名为 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 规则。这就是我试图展示我的电影的内容：

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

解决方法

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

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