VUE3 開発の基本: Vue.js プラグインを使用して無限スクロール リストを作成する

Vue.js は、インタラクティブな Web アプリケーションを迅速に構築するための人気のある JavaScript フレームワークです。最新の Vue.js 3 バージョンは、多くの新機能とパフォーマンスの最適化を提供します。その 1 つは、無限スクロール リストの作成です。この記事では、Vue.jsプラグインを使用して無限スクロールリストを作成する方法を紹介します。

無限スクロールリストとは何ですか?

無限スクロール リストは、大量のデータ (記事、製品リストなど) を動的にロードし、ユーザーが下にスクロールするにつれてさらに多くのデータを自動的にロードできる Web アプリケーションの一般的なデザイン パターンです。このデザイン パターンは、ユーザー エクスペリエンスを向上させ、ページの読み込み時間を短縮するのに非常に効果的です。

Vue.js プラグイン

Vue.js はプラグインを使用して機能を拡張します。プラグインは Vue.js アプリケーションにグローバル機能を追加でき、Vue.js プロジェクトで簡単に使用できます。 Vue.js プラグインは通常、Vue.use() メソッドを介してアプリケーションに追加されます。

無限スクロール リスト プラグイン

Vue.js では、いくつかの無限スクロール リスト プラグインが利用可能です。そのうちの 1 つは v-infinite-scroll です。 v-infinite-scroll は、DOM イベント (「スクロール」) を通じてコン​​テンツを動的にロードできる、軽量のディレクティブ ベースの vue.js プラグインです。

v-infinite-scroll プラグインを使用して無限スクロール リストを実装する

v-infinite-scroll プラグインを使用して単純な無限スクロール リストを実装する手順は次のとおりです。 :

最初のステップ: v-infinite-scroll プラグインをインストールする

npm または Yarn を使用して v-infinite-scroll プラグインをインストールします:

npm install vue-infinite-scroll

Or

yarn add vue-infinite-scroll

ステップ 2: v-infinite-scroll をインポートします。スクロール プラグイン

Vue コンポーネントにインポートします。v-infinite-scroll プラグイン:

import infiniteScroll from ‘vue-infinite-scroll’
export default {
  directives: { 
    infiniteScroll
  }
}

ステップ 3: v-infinite-scroll ディレクティブを HTML に追加します

追加無限スクロールを必要とする要素に対する v-infinite-scroll ディレクティブ:

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</div>

下から 10 個の要素までスクロールすると、loadMore メソッドがトリガーされることがわかります。ただし、データのロード中にユーザーが他のリクエストを行うことを望まないため、データがロードされるまでディレクティブを無効にするビジー フラグを追加する必要があります。

ステップ 4: Vue コンポーネントにloadMore メソッドを実装する

Vue コンポーネントにloadMore メソッドを定義して実装します。このメソッドは、さらにデータをロードしてリストに追加するために使用されます。

export default {
  data() {
    return {
      list: [
        'Item 1',
        'Item 2',
        'Item 3'
      ],
      busy: false
    }
  },
  methods: {
    async loadMore() {
      if (this.busy) return
      this.busy = true
      // 模拟从服务器获得新数据的延迟
      await new Promise(resolve => setTimeout(resolve, 2000))
      this.list.push('Item ' + (this.list.length + 1))
      this.busy = false
    }
  },
  directives: { 
    infiniteScroll
  }
}

この例では、loadMore メソッドは async/await を使用して新しいデータを非同期的に読み込みます。データのロードが完了したら、新しいデータを既存のリストに追加し、ビジー フラグを false に設定してディレクティブを再度有効にします。

概要

Vue.js プラグインを使用すると、Vue.js アプリケーションのスケーラビリティと柔軟性を高めることができます。 v-infinite-scroll プラグインを使用すると、無限スクロール リストを簡単に実装し、ユーザー エクスペリエンスを最適化し、ページの読み込み時間を短縮できます。上記の手順により、Vue.js 3 で基本的な無限スクロール リストを実装し、ニーズに応じて追加することができます。

以上がVUE3 開発の基本: Vue.js プラグインを使用して無限スクロール リストを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。