Vue コンポーネントで無限スクロール読み込みとページング表示を実装する方法

Vue コンポーネントで無限スクロールの読み込みとページング表示を実装する方法

フロントエンド開発では、大量のデータを表示する必要がある状況によく遭遇します。 。ユーザー エクスペリエンスを向上させるために、通常はデータをページに表示し、ページの一番下までスクロールすると次のページのデータが自動的に読み込まれます。この記事では、Vue コンポーネントを使用して無限スクロール読み込みとページング表示機能を実装する方法と、具体的なコード例を紹介します。

まず、ページング データを取得するためのバックエンド インターフェイスを準備する必要があります。指定したページ番号 (page) のデータリストを取得できるインターフェース /api/data があるとします。インターフェイスによって返されるデータ形式は次のとおりです。

{
  "total": 100, // 总数据条数
  "list": [...] // 当前页的数据列表
}

次に、Vue のコンポーネント開発アイデアを使用して、スクロール読み込みとページング表示の機能を独立したコンポーネントにカプセル化できます。これを InfiniteScroll コンポーネントと呼ぶことができます。まず、親コンポーネントにコンポーネントを導入し、必要なパラメータを渡す必要があります。

<template>
  <div>
    <infinite-scroll
      :api-url="'/api/data'" // 后端接口地址
      :page-size="10" // 每页数据条数
      @load-next-page="loadNextPage"
    >
      <!-- 数据展示的代码 -->
    </infinite-scroll>
  </div>
</template>

InfiniteScroll コンポーネントでは、スクロール イベントをリッスンし、ページの一番下までスクロールするときにデータの次のページをロードする操作をトリガーする必要があります。 window オブジェクトの scroll イベントを使用して、スクロール イベントをリッスンできます。

export default {
  data() {
    return {
      page: 1, // 当前页码
      total: 0, // 总数据条数
      list: [] // 当前页的数据列表
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

      if (scrollTop + windowHeight >= documentHeight) {
        this.loadNextPage();
      }
    },
    async loadNextPage() {
      if (this.page >= Math.ceil(this.total / this.pageSize)) {
        return; // 已加载所有数据
      }

      const response = await fetch(`${this.apiUrl}?page=${this.page + 1}`);
      const result = await response.json();

      this.total = result.total;
      this.list = [...this.list, ...result.list];
      this.page++;
    }
  }
};

上記のコードでは、window.addEventListener メソッドを使用してスクロール イベント リスナーを追加し、ページの一番下までスクロールするときに次のページのデータの読み込みをトリガーします。同時に、コンポーネントが破棄されるときに、 window.removeEventListener メソッドを使用してスクロール イベント リスナーを削除する必要があります。

handleScroll メソッドでは、まず、ページのスクロール距離 (scrollTop)、ウィンドウの高さ (windowHeight)、ドキュメントの合計の高さ (ドキュメントの高さ)。そして、スクロール位置にウィンドウの高さを加えた値が文書の全高以上になった場合、ページが一番下までスクロールされたと判断し、次のページのデータをロードする操作を実行します。トリガーされます。

loadNextPage メソッドでは、最初にすべてのデータがロードされたかどうか、つまり現在のページ番号がデータ ページの総数より大きいかどうかを判断します。すべてのデータがロードされている場合は、直接戻ります。それ以外の場合は、非同期リクエストを通じてデータの次のページを取得し、返されたデータを元のデータ リストにマージし、現在のページ番号とデータ項目の総数を同時に更新します。

最後に、InfiniteScroll コンポーネント内で、取得したデータに基づいてそれを表示できます。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="page >= Math.ceil(total / pageSize)">已加载所有数据</div>
  </div>
</template>

上記のコードでは、v-for 命令を通じてデータ リストを走査し、各要素の id 属性を key# として使用します。 # #、リスト要素の一意性を確保します。同時にコンポーネントの下部にプロンプ​​トを追加し、ページ番号がデータの総ページ数以上の場合、「すべてのデータがロードされました」というプロンプト メッセージが表示されます。

まとめると、

InfiniteScroll コンポーネントを導入し、対応するパラメータを与えることで、無限スクロール読み込みとページング表示の機能を実現できます。スクロール イベントをリッスンすることにより、ページの一番下までスクロールすると、データの次のページが自動的に読み込まれ、無限スクロール ロードの効果が得られます。同時にコンポーネントのデータを更新することで、各ページのデータ数と総データ数に基づいてページ表示が行われます。

この記事で提供されているコード例が役に立ち、Vue コンポーネントで無限スクロール読み込み機能やページング表示機能を実装できるようになれば幸いです。ご質問や改善のための提案がある場合は、ディスカッションのためにメッセージを残してください。

以上がVue コンポーネントで無限スクロール読み込みとページング表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。