Vue.jsで無限スクロールを実装する方法

投稿日: 2022-04-20 2022-10-24
タグ: Vue.js

序章

無限スクロールは、ユーザーが下にスクロールして現在のコンテンツページの一番下に到達し、次にコンテンツの次のページが読み込まれて表示されるWebサイトおよびアプリケーションの機能です。この効果は、ページネーションナビゲーションをクリックする代わりに使用されます。モバイルデバイスとタッチスクリーンを使用する状況では、無限スクロールによりユーザーエクスペリエンスが向上する場合があります。

この機能は、ユーザーが一度にではなく、大量のデータや画像を必要なときに読み込む必要がある場合に特に便利です。 Twitter、Facebook、Instagramなどのソーシャルメディアは、長年にわたってこれを普及させてきました。

このチュートリアルでは、ランダムユーザーAPIからデータをフェッチして表示するために無限スクロールを使用するVue.jsアプリケーションの例を作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。

このチュートリアルは、Nodev15.3.0で検証されました。 npm v6.14.9、 vue v2.6.11、および axios v0.21.0。このチュートリアルは、以前のバージョンからの移行における変更を反映するように編集されました @vue/cli.

ステップ1—プロジェクトの設定

このチュートリアルでは、で生成されたデフォルトのVueプロジェクトからビルドします。 @vue/cli.

npx @vue/cli create vue-infinite-scrolling-example --default

これにより、デフォルト構成で新しいVueプロジェクトが構成されます。 Vue 2, babel, eslint.

新しく作成されたプロジェクトディレクトリに移動します。

cd vue-infinite-scrolling-example

次に、インストールします axios:

npm install axios@0.21.0

この時点で、Axiosをサポートする新しいVueプロジェクトが作成されているはずです。

ステップ2—初期ユーザーデータの取得

Vueアプリに使用できる無限スクロール用のさまざまなnpmパッケージがあります。ただし、これらの一部は、必要のない機能や多数の依存関係のために、ニーズに対してやり過ぎになる可能性があります。

このチュートリアルでは、ブラウザウィンドウの一番下までスクロールすると、新しいデータセットをフェッチするJavaScript関数を作成します。これには、追加のプラグインやパッケージは必要ありません。

まず、開く App.vue コードエディタで。

次に、のコードを置き換えます template の配列をループするディスプレイを備えています users 写真、名、姓、生年月日、都市、州を表示するには：

src / App.vue

<template>
  <div id="app">
    <h1>Random User</h1>
      <div
         class="user"
         v-for="user in users"
         :key="user.first"
      >
      <div class="user-avatar">
        <img :src="user.picture.large" />
      </div>
      <div class="user-details">
        <h2 class="user-name">
          {{ user.name.first }}
          {{ user.name.last }}
        </h2>
        <ul>
          <li><strong>Birthday:</strong> {{ formatDate(user.dob.date) }}</li>
          <li><strong>Location:</strong> {{ user.location.city }}, {{ user.location.state }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

次に、のコードを置き換えます <style> 各ユーザーの表示を調整するためのCSSルールを使用します。

src / App.vue

<style>
.user {
  display: flex;
  background: #ccc;
  border-radius: 1em;
  margin: 1em auto;
}

.user-avatar {
  padding: 1em;
}

.user-avatar img {
  display: block;
  width: 100%;
  min-width: 64px;
  height: auto;
  border-radius: 50%;
}

.user-details {
  padding: 1em;
}

.user-name {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-weight: 900;
}
</style>

次に、のコードを置き換えます <script> APIに対して5人のユーザーの初期リクエストを行い、 beforeMount ライフサイクル：

src / App.vue

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    getInitialUsers() {
      axios.get(`https://randomuser.me/api/?results=5`).then((response) => {
        this.users = response.data.results;
      });
    },
  },
  beforeMount() {
    this.getInitialUsers();
  },
};
</script>

生年月日（DOB）は、 ISO8601形式の文字列として提供されます。これをより人間が読めるようにするために、次を使用して文字列を日付文字列に変換できます。 Date.prototype.toDateString():

src / App.vue

<script>
// ...

export default {
  // ...
  methods: {
    formatDate(dateString) {
      let convertedDate = new Date(dateString);
      return convertedDate.toDateString();
    }
    // ...
},
  // ...
};
</script>

この最初のリクエストでは、ユーザーがアプリケーションを開くと5人のユーザーが表示されます。

注：以前、このチュートリアルでは、ランダムユーザーAPIに対して複数のリクエストを実行して、最初に複数のユーザー結果をロードしていました。このセクションは、新しいものを使用するように書き直されました results APIによって提供されるパラメーター。

ターミナルウィンドウで、アプリケーションをコンパイルして提供します。

npm run serve

Webブラウザーでアプリケーションを開くと、5人のランダムなユーザーが表示されます。

ステップ3—無限スクロールロジックの実装

無限スクロールロジックでは、ユーザーがウィンドウの下部に到達したことを検出する必要があります。これは、次の3つのプロパティで実現できます。

document.documentElement.offsetHeight：ドキュメント要素の高さ全体のピクセル数。
document.documentElement.scrollTop：ドキュメント要素の上から配置されている現在のピクセル数。
window.innerHeight：画面の高さのピクセル数。

いつ document.documentElement.scrollTop プラス window.innerHeight に等しい document.documentElement.offsetHeight、ユーザーがウィンドウの下部に到達したと見なすことができます。

window.onscroll = () => {
  let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

  if (bottomOfWindow) {
    // ...
  }
};

ここ、 window.onscroll をリッスンします scroll イベントであり、イベントが検出されたときにチェックを実行します。

注：イベントをバインドする場合、特にスクロールイベントにバインドする場合は、イベントをデバウンスすることをお勧めします。デバウンスとは、最後に呼び出されてから指定された時間が経過したときにのみ関数を実行することです。

ただし、このチュートリアルの必要性のために、デバウンサーは適用されません。

の内部 if 条件、追加しましょう GET ランダムユーザーAPIから別のランダムユーザーをフェッチするためのAxiosを使用したサービスメソッド：

axios.get(`https://randomuser.me/api/`).then(response => {
  this.users.push(response.data.results[0]);
});

さて、再訪 App.vue テキストエディタで、新しいコードを追加します。

コンポーネントの methods、と呼ばれる新しい関数を作成する必要があります、 getNextUser() そしてそれをロードします mounted() ライフサイクル方式。

src / App.vue

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    formatDate(dateString) {
      let convertedDate = new Date(dateString);
      return convertedDate.toDateString();
    },
    getInitialUsers() {
      axios.get(`https://randomuser.me/api/?results=5`).then((response) => {
        this.users = response.data.results;
      });
    },
    getNextUser() {
      window.onscroll = () => {
        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
        if (bottomOfWindow) {
          axios.get(`https://randomuser.me/api/`).then(response => {
            this.users.push(response.data.results[0]);
          });
        }
      }
    }
  },
  beforeMount() {
    this.getInitialUsers();
  },
  mounted() {
    this.getNextUser();
  }
}
</script>

次に、アプリケーションを再コンパイルして提供します。

Webブラウザーでアプリケーションを開き、ページの一番下までスクロールすると、新しいユーザーがページに追加されます。

ページの一番下までスクロールするたびに、Axiosを使用して新しいデータをフェッチし、そのデータを配列にプッシュします。

結論

このチュートリアルでは、Vue.jsアプリケーションで無限スクロールの実装を構築しました。それは頼りにした beforeMount と mounted ライフサイクルフックを使用して、リクエストを初期化し、APIにプリフェッチします。

画像を遅延ロードするには、画像ソースをデータ配列にプッシュし、画像を繰り返し処理します template とバインドします <img :src=""> アレイに。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036