0

私はアプリで作業しており、イオン スライド コンポーネントを使用して一連の映画を表示したいと考えています。映画がすべて同じ行に表示され、ユーザーが水平方向にスクロールできるように、Netflix アプリのように映画を表示したいと考えています。イオンライダーを使うと一応出来たのですが、スタイリングが全く効きません。ムービー画像は外部 API から提供され、すべて同じサイズではありませんが、高さの比率は同じです。問題は：

  • 映画の画像は同じ高さで表示されません。
  • それらは互いに近すぎて、互いに重なっています。

デフォルトのion-img コンポーネント スタイリング ルールではなく、カスタム scss ルールを試してみましたが、結果はさらに悪かったです。今はデフォルトでそれを持っていますが、唯一の問題はスライダーの設定にあるようです。

私が持っている方法は、映画の配列に対してイオンスライドを作成し、その中に配列上の各映画の反復があるということです。私は映画オブジェクトをバインドするコンポーネントと呼びます。そのコンポーネントは映画の画像と映画のタイトルをレンダリングします。

私がやっている方法は次のとおりです。

  1. この配列の各要素が、コレクションの名前、そのコレクションの所有者のID、およびIDの映画の配列を持つ映画のコレクションを含むオブジェクトである配列があります。
  2. 配列の各要素に対して、collectionこのコンポーネントと呼ばれるコンポーネントを呼び出して、コレクションを取得し、コレクションのタイトルをレンダリングし、API から映画に関する完全な情報を取得する映画 ID を反復処理します。
  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

私は最終的に解決策を見つけました。画像の幅や高さを設定する必要はなく、ビューごとのスライド数を設定するだけで、ion-slider 間のスペースによって画像サイズが自動的に設定されます。これは私のスライダー設定です:

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