0

我正在使用一个应用程序，我想使用 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 规则。这就是我试图展示我的电影的内容：

在此处输入图像描述

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

在此处输入图像描述 在此处输入图像描述

4

1 回答 1

0

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

slideOpts = {
    slidesPerView: 2.5,
    spaceBetween: 10,
    autoHeight: true
  }
于 2021-01-28T09:24:49.543 回答