Vue.js を使用して無限スクロール読み込みを実装するための完全ガイド

データ量が増加し続けるにつれて、Web ページのスクロールによる読み込みが徐々にユーザー エクスペリエンスの重要な部分になってきました。この投稿では、Vue.js を使用して無限スクロール読み込みを実装する方法に関する完全なガイドについて説明します。

無限スクロール読み込みとは何ですか?

無限スクロール読み込み (無限スクロールとも呼ばれる) は、ユーザーがページの一番下までスクロールするときにコンテンツを追加するために使用される Web デザイン手法です。このテクノロジーは、コンテンツを動的に表示する必要があるブログ、ソーシャル メディア、オンライン ストア、その他の Web サイトで一般的に使用されています。

無限スクロールはページングとは異なります。従来のページングでは、ユーザーは次のページのコンテンツを読み込むためにページをめくる必要があります。無限スクロールでは、ページは次のページのコンテンツを自動的にロードし、ユーザーはページをめくることなくリストの閲覧を続けることができます。

Vue.js とは何ですか?

Vue.js は、ユーザー インターフェイスを構築するための軽量の JavaScript フレームワークです。拡張性と保守性に優れており、既存のプロジェクトに簡単に統合できます。 Vue.js は、双方向データ バインディング、コンポーネント化されたアーキテクチャ、仮想 DOM などの多くの便利な機能を提供し、Web アプリケーションの開発をより迅速かつ簡単にします。

ここで、Vue.js を使用して無限スクロール読み込みを実現する方法を検討し始めます。

ステップ 1: プロジェクトを準備する

まず、Node.js と npm を通じて Vue.js プロジェクトをセットアップする必要があります。次に、リスト項目を表示するための Vue.js コンポーネントを作成します。

Vue.js をインストールし、プロジェクトを準備します:

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install

コンポーネントの作成:

次のコマンドを使用してコンポーネントを作成できます:

vue generate component List

ステップ 2 : 無限スクロールの実装

ここが最も重要な部分です。無限スクロールを実現する方法です。

ページネーションを必要とする API があり、1 ページのデータと次のページの URL アドレスを返すとします。

無限スクロールを実現するには、利用可能なデータがなくなるか、ユーザーがページのスクロールを停止するまで、データの次のページを読み込む必要があります。 Vue.js の watch API を使用してスクロール イベントをリッスンし、ページの一番下までスクロールしたときに次のページを読み込むイベントをトリガーできます。

前に作成したコンポーネントに、次のコードを追加します。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1"
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      const response = await fetch(this.nextUrl);
      const data = await response.json();
      this.items = [...this.items, ...data.items];
      this.nextUrl = data.nextUrl;
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

最初に 2 つのデータ項目を定義しました: items と nextUrl、it​​ems はロードされたリスト項目を保存するために使用され、nextUrl は次のページの URL アドレスを保存するために使用されます。

mounted ライフサイクル フックでは、handleScroll メソッドをスクロール イベントにバインドします。

watch API を使用してルート変更イベントをリッスンし、コンポーネントが再利用されるときにスクロール イベントを再バインドします。

loadMore メソッドは、次のページのデータをロードするために使用されます。 fetch API を使用してデータを取得し、それを items 配列に追加します。 handleScrollメソッドはスクロールイベントの確認に使用され、ページが一番下までスクロールすると、loadMoreメソッドが呼び出され、次のページのデータが読み込まれます。

最後に、コンポーネントが破棄されたときのスクロール イベントの監視を解放します。

これで無限スクロールの実装が完了しました。ユーザーがページの一番下までスクロールすると、次のページのデータが自動的にロードされます。

ステップ 3: 読み込みプロンプトとエラー プロンプトを追加する

ユーザー エクスペリエンスを向上するには、通常、リストの最後に読み込みプロンプトを追加する必要があり、エラーが発生した場合にはエラー プロンプトを表示する必要もあります。

前のコンポーネントに次のコードを追加します。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="isLoading">Loading...</div>
    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1",
      isLoading: false,
      errorMessage: null
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      try {
        this.isLoading = true;
        const response = await fetch(this.nextUrl);
        const data = await response.json();
        this.items = [...this.items, ...data.items];
        this.nextUrl = data.nextUrl;
      } catch (error) {
        this.errorMessage = "Something went wrong." + error.message;
      } finally {
        this.isLoading = false;
      }
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

2 つのデータ項目 isLoading と errorMessage を追加しました。これらは、読み込み状況を表示するために使用されます。ヒントとエラー メッセージ。 loadMore メソッドでは、try-catch ブロックを追加してデータのロード時に発生する可能性のあるエラーをキャッチし、finally ブロックでロード プロンプトを閉じます。 errorMessage にエラー メッセージを表示します。

これで、読み込みプロンプトとエラー プロンプトを含む無限スクロール リストが完成しました。

結論

この記事では、Vue.js を使用して無限スクロール読み込みリストを実装する方法を学びました。スクロール イベントの監視、データの動的ロード、表示ロード、エラー プロンプトなどの重要なテクノロジーについて学びました。

無限スクロールを実装する場合は、一度に大量のデータをロードしすぎないように注意する必要があります。これはパフォーマンスの低下を引き起こします。また、ユーザー エクスペリエンスを向上させるために、適切な読み込みプロンプトとエラー プロンプトをユーザーに提供する必要があります。

もちろん、これは単なる単純な例です。 Vue.js はより多くの機能と API を提供し、より複雑なコンポーネントやアプリケーションを作成できるようになります。この記事があなたのお役に立てば幸いです。

以上がVue.js を使用して無限スクロール読み込みを実装するための完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。