無限スクロールはしばらく前から存在しています。 基本的な考え方: スクロールすると、新しいコンテンツが下部に読み込まれ、一見無限のスクロールが作成されます。 これを?qū)g裝するのは簡(jiǎn)単ですが、慎重に計(jì)畫しないとパフォーマンスが低下します。 コンテンツを數(shù)回再フェッチすると、數(shù)百の DOM 要素 (その多くは非表示) が存在する可能性があります。 幸いなことに、これを軽減するパターンが存在するため、Angular を使用してパターンを検討していきます。

これは避けたいことです。

仮想スクロール

仮想スクロールでは、無限スクロールとは異なり、常に大きなリストのサブセットのみが表示されます。 すべてを一度にレンダリングするのは非効率である大規(guī)模なデータセットに最適です。 可視 (および可視に近い) アイテムのみがレンダリングされます。ユーザーがスクロールすると、項(xiàng)目が動(dòng)的に入れ替わります。 これにより DOM 要素が大幅に削減され、パフォーマンスが向上します。

仮想スクロールは、ビューポートの高さに一致するコンテナを作成することで機(jī)能します。 表示可能なアイテム (およびバッファ) のみが、CSS を介して管理され、特定のスクロール深度でこのコンテナ內(nèi)にレンダリングされます。 スクロールするとコンテナが更新され、新しいアイテムが表示されたり、表示されなくなったアイテムが削除されたり、スクロールの深さが調(diào)整されます。 これを無限スクロールと組み合わせると、パフォーマンスを犠牲にすることなく事実上無限のリストが作成されます。

以下の例は數(shù)千の項(xiàng)目のリストを示していますが、一度に最大 8 つの項(xiàng)目をレンダリングします。 スクロールすると CSS スクロールの高さが調(diào)整され、リストがより長(zhǎng)くなったように見えます。

実際の例

Reddit のページ分割された API からメディアを取得し、それを仮想スクロール リストに表示する Angular アプリケーションを構(gòu)築してみましょう。 これには、サブレディットを選択するための検索バーとフィルターが含まれます。 下にスクロールすると、さらにコンテンツが読み込まれます。 私たちの主な要件:

1. RxJS Observables と非同期パイプによって駆動(dòng)されます。
2. サブレディットまたはフィルターの変更時(shí)にコンテンツをリセットしますが、新しいコンテンツの追加時(shí)にはリセットしません。
3. 以前のコンテンツをメモリに保存し、冗長(zhǎng)な API 呼び出しを行わずにシームレスな上下スクロールを?qū)g現(xiàn)します。

@angular/cdk パッケージ (仮想スクローラー コンポーネントを含む) を使用します。 npm i @angular/cdk.

この例では Angular を使用していますが、同様のパターンは React、Vue、またはバニラ JavaScript にも適用できます?；A(chǔ)となる原理を説明する基本的なデモは、ここから入手できます。

サービスのセットアップ

まず、Angular の HttpClient と RxJS Observable を使用して Reddit API からコンテンツを取得し、サブレディット名とフィルターを管理するサービスを作成します。 (簡(jiǎn)潔にするために一部のコードは省略されています。完全な実裝はここにあります)。

// ... (Omitted for brevity) ...

コンテンツ取得メソッドは、データ要求中に特定のプロパティを追跡します。 page プロパティがクエリ文字列に追加され、最後の項(xiàng)目の後に新しいコンテンツがフェッチされるようになります。 また、NSFW コンテンツや投稿ヒントのないアイテムも除外します。これにより、期待されるコンテンツのみが表示されるようになります。

// ... (Omitted for brevity) ...

query$ オブザーバブル (以前は省略されていました) は、コンテンツを取得する前に、さまざまなオブザーバブル ストリームをマージします。 scan 演算子は、以前のストリーム結(jié)果と現(xiàn)在のストリーム結(jié)果を結(jié)合し、複數(shù)のページにわたる大きなデータ配列を構(gòu)築します。

これにより、広範(fàn)囲にわたるスクロールが可能になります。サブレディット名またはフィルターの変更のみが完全な再取得をトリガーします。 nextPage のプロパティである query$ には、現(xiàn)在のセットの最後の項(xiàng)目 ID が格納されます。これは、仮想スクローラーの下部に近づいたときに、次にどのページをフェッチするかを決定するために使用されます。

// ... (Omitted for brevity) ...

RxJS の威力は、データ ストリームの結(jié)合と操作にあります。これにより、ビジネス ロジックがコンポーネントに到達(dá)する前に処理できるようになり、コンポーネントをクリーンで再利用可能な狀態(tài)に保つことができます。

コンポーネントのセットアップ

次に、Angular の CdkVirtualScrollViewport を使用してコンテンツを表示するコンポーネントを設(shè)定します。 メソッドはビューポートの下部付近のスクロールを処理し、subRedditPage$ オブザーバブルを介して次のページを取得します。

// ... (Omitted for brevity) ...

テンプレートは、非同期パイプを使用して query$ をサブスクライブします。 注: 仮想スクローラーは、高さが可変のコンテンツではさらに複雑になります。パフォーマンスを向上させるために、アイテムの高さを一定にすることをお?jiǎng)幛幛筏蓼埂?/p>

// ... (Omitted for brevity) ...

onScroll メソッドは、ユーザーが一番下に近づくと、より多くのコンテンツを取得します。 nextPage ID (query$ から) を使用して subRedditPage$ に送信し、次の API 呼び出しをトリガーして、query$ 経由でリストを更新します。

// ... (Omitted for brevity) ...

検索バーとタブのコントロールも統(tǒng)合されています (以下の単純な例)。

// ... (Omitted for brevity) ...

結(jié)論

これにより、実質(zhì)的に無限のスクローラーが作成されます。 ここでテストできます。 Reddit の API にはレート制限があります。テスト中にぶつかる可能性があります。 追加機(jī)能などの詳細(xì)については、GitHub リポジトリこちらをご覧ください。

以上がAngular による実質(zhì)的に無限のスクロールの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。