Vue.js による無限スクロール: ステップバイステップガイド

このステップバイステップガイドでは、Vue.js を使用して無限スクロールを実装する方法を学びます。無限スクロールを使用すると、ユーザーをスクロールさせてコンテンツに関心を持ち続けることができます。

無限スクロールでは、ユーザーがページを下にスクロールすると Web ページに新しいコンテンツが読み込まれるため、ユーザーは新しいページをクリックしたりページを更新したりしなくても、新しいコンテンツを表示できるようになります。この機能は、ユーザーが必要とする大量のデータや画像を一度にロードするのではなく、それらをロードする場合に特に便利です。

長年にわたり、Twitter、Facebook、Instagram などのソーシャルネットワーキングサイトによって、無限スクロールが普及してきました。このチュートリアルでは、ユーザーインターフェイスと単一ページアプリケーションを構築するための JavaScript フレームワークである Vue を使用して、無限スクロールを実装します。始めましょう！

Vue を始める

Vue は、仮想 DOM を備えた軽量のフレームワークです。これは、宣言的にデータを DOM にレンダリングする方法を提供し、双方向のデータバインディングを使用して、データが変更されたときに DOM を最新の状態に保ちます。

Vue 3 について私が本当に感謝しているのは、コードがコンパクトであることです。スクリプト、HTML、スタイルを含むすべてが 1 つのファイル内に独自の場所で刻まれています。このソリューションは、私たちのような最も単純なプロジェクトに最適であり、アイデアをいじり始めるのに最適です。

プロジェクトの説明

私たちのアプリケーションでは、他のプロジェクトで役立ついくつかの機能を実装します。ランダムなオンラインデータジェネレーターからデータをダウンロードします。このプロジェクトでは、 http://random-data-api.comを使用します。これは、便利な API と実際に操作できる現実的なデータを提供するため、アプリケーションが現実のシナリオでどのように動作するかを確認できるようになります。

新しいデータのバッチごとに、新しいデータがブラウザにダウンロードされている間、短いメッセージが表示されます。これは、特に API の応答が任意に遅くなる可能性があることを考慮すると、常に良い習慣となります。したがって、ユーザーは内部で何かが起こっていることに気づくでしょう。

データを表示するグリッドには、石積みの CSS レイアウトを使用します。このプロジェクトでは、私が見つけた中で最もシンプルな CSS レイアウトの 1 つを使用します。あまりやり直すことなく、他のフレームワークに簡単に適応させることができます。

以下の画像は最終結果を示しています。

プロジェクトのアイデアは非常にシンプルです。ページの第一印象に基づいて、データの最初のバッチがブラウザにダウンロードされ、視覚化されます。ユーザーがデータを視覚化するコンポーネントをスクロールしているときに、ページの下部を押すと、新しいデータのバッチが読み込まれます。現在のビジュアライゼーションの最後に、新しいデータが UI にプッシュされ、それを収容するための新しいスペースが利用可能になります。

詳細については、 GitHub でこのプロジェクトの完全なコードリポジトリをご覧ください。次のセクションでは、コードの最も興味深い部分について詳しく説明します。

masonry成分

私たちの目標は、ユーザーが「無限」データを含むコンポーネントの最下部に到達したことを検出することです。ソースコードでは、このコンポーネントはと呼ばれますmasonry。これは、次の 3 つのプロパティを操作することで実現できます。

masonry.clientHeightmasonry:要素全体の高さのピクセル数
masonry.scrollTop: アイテムのリストですでにスクロールしたピクセル数
window.scrollHeight: アイテムのリストに現在含まれているピクセル数

次のコードはこのアイデアを実装しています。

  mounted() {
    const masonry = document.querySelector('#infinite-list');
    document.title = "Ethrnal Scroll Demo";
    masonry.addEventListener('scroll', e =&amp;gt; {
      if (masonry.scrollTop + masonry.clientHeight &amp;gt;= masonry.scrollHeight) {
        this.getNextBatch(30);
      }
    })
  },
};

以下の画像では、3 つの変数がどのように相互作用するかを視覚化できます。scrollTop plusclientHeightがより大きい場合scrollHeight、リストの最後までスクロールしたことになり、項目の別のバッチが必要になります。

Scrolltop Clientheight Scrollheight Demo Diagram

以下の画像では、コンテンツの最後までスクロールすると値がどのように変化するかを確認できます。

リストの最後に到達したかどうかをチェックするメカニズムをクリアしたら、コード内にこのチェックを追加する適切な場所を見つける必要があります。自然な場所がscrollイベントです。したがって、前後にスクロールするたびに、masonryコンポーネントはリストの最後に到達するかどうかを制御できます。

mounted()もう 1 つの注目すべき点は、Vue が提供するメソッドでスクロールイベントのリスナーを割り当て、コンポーネントがマウントされた後にコードを実行できるようにしていることです。

スクロールについて詳しく説明する前に、アプリケーションが処理するデータを見てみましょう。

  data() {
    return {
      loading: false,
      items: [],
      page_count: 0,
      sizes: ["tall", "taller", "tallest"]
    };
  },

にはdata()、コンポーネントの状態が示されています。詳しく見てみましょう:

loadingtrue: ラベルを表示するときのブール変数Loading next batch。App.vueファイルの 14 行目を参照してください
items[]: 表示されるデータを含むオブジェクトの配列
page_count: ランダムなソースからダウンロードしたバッチの数
sizes[]: 上で説明したタイルの 3 つのスタイルのラベルを含む配列

grid-container {
      display: grid;
      /* 1 /
      grid-auto-rows: 50px;
      / 2 /
      grid-gap: 10px;
      / 3 /
      grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
      / 4 */
      overflow: auto;
      height: 30vh;
      border: 2px solid;
      border-radius: 5px;
      text-align: center;
      margin: 0 0 35px 0;
    }
    .tall {
      grid-row: span 2;
      background-color: #7632ed;
    }
    .taller {
      grid-row: span 3;
      background-color: #925cef;
    }
    .tallest {
      grid-row: span 4;
      background-color: #b9a3de;
    }

上のコードは、コンポーネントのさまざまなタイルを定義した<style>のセクションで定義された CSS の詳細を示しています。セレクター、、およびは、ダウンロードされたデータにランダムに割り当てられます。App.vuemasonrytalltallertallest

getNextBatch(size) {
  this.loading = true;
  axios.get("https://random-data-api.com/api/v2/users?size=" + size + "&amp;amp;response_type=json").then((response) =&amp;gt; {
    response.data.map((x) =&amp;gt; {
      const new_item = {
        name: x.first_name + " " + x.last_name,
        dob: x.date_of_birth,
        location: x.address.state,
        size: this.sizes[Math.floor(Math.random() * this.sizes.length)]
      };
      this.items.push(new_item)
    })
    this.loading = false;
    this.page_count++;
  });
}

getNextBatch上に表示されているVue アプリケーションの唯一のメソッドで、ランダムソースからのデータのバッチの読み込みを実装します。axios.get()必要な項目の数を指定して、ランダムデータソース API から項目の新しいバッチをダウンロードします。データが到着すると、そのデータが操作されてフィールドの一部が抽出され、配列に追加されるオブジェクトが組み立てられますitems[]。

getNextBatch()また、2 つの単純な処理も行います。1 つは、ページ数またはダウンロードしたバッチ数を更新し、ファイルLoading next batchのラベルを表示または非表示にしますApp.vue。

コードをどのように再利用するかに注意してください。ページがロードされたときに実行されるメソッドgetNextBatch()でも使用しますが、コンポーネントはまだ表示されていません。この呼び出しの効果は、コンポーネント内で視覚化されるデータで配列beforeMount()を埋めることです。items[]masonry

結論

この記事では、Vue で書かれた Web ページに無限スクロールを実装するための必要最低限のソリューションを検討しました。

他のプロジェクトでの再利用を容易にするために、無限スクロール機能を専用のに実装しました<div>。無限スクロールの他の 2 つの部分は、コード内で明確に分離されています。これには、データの新しいバッチをダウンロードする関数と、この関数を呼び出す場所が含まれます。これは、開発者が関数内の API の URL をgetNextBatch()より便利なものに置き換えるのに役立ちます。

特に Vue3 は、この例のように小規模な概念実証を作成する場合に非常に効果的です。ただし、コンポーネントを組み合わせてスケールアップし、より複雑な機能を実現することもできます。この記事を楽しんでいただければ幸いです

出典: https://blog.logrocket.com

#vue #vuejs

Vue.js による無限スクロール: ステップバイステップ ガイド

Vue を始める

プロジェクトの説明

masonry成分

結論

Vue.js による無限スクロール: ステップバイステップガイド