はじめに
このプロジェクトでは、Vue.js を使用して仮想スクロールリストを実装する方法を学びます。仮想スクロールは、大規模なデータセットのうち、表示されている領域のみをレンダリングし、非表示領域のデータをレンダリングまたは部分的にレンダリングしない手法です。これにより、非常に高いレンダリングパフォーマンスを達成でき、大量のデータを少量でレンダリングするのに適しています。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
axiosライブラリを使用してデータを非同期で読み込み、レンダリングする方法- 表示されているリスト項目のみをレンダリングする仮想スクロール機能を実装する方法
- 現在のスクロール位置に基づいて、表示されているリスト項目の開始インデックスと終了インデックスを計算する方法
- 表示領域の外に追加のリスト項目をレンダリングするバッファを使用して、レンダリングパフォーマンスを最適化する方法
🏆 成果
このプロジェクトを完了すると、以下ができるようになります。
- レンダリングパフォーマンスを向上させる仮想スクロール機能を実装する
- Vue.js コンポーネントでデータを非同期で読み込み、レンダリングする
- 現在のスクロール位置に基づいて、表示されているリスト項目を計算する
- スクロール中の白画面を防ぐためにバッファを使用する
プロジェクト構造を設定する
このステップでは、プロジェクト構造とログイン機能に関連するファイルについて学びます。
プロジェクトのディレクトリ構造は以下の通りです。
この問題の初期コードはすでに提供されています。コーディング環境を開くと、ディレクトリ構造は以下のようになります。
├── js
│ ├── axios.min.js
│ ├── http-vue-loader.js
│ └── vue.min.js
├── data.json
├── index.html
└── virtual-scroll-list.vue
ここで：
js/axios.min.jsは axios リクエストライブラリのファイルです。js/vue.min.jsとjs/http-vue-loader.jsは Vue.js ライブラリ関連のファイルです。data.jsonはリクエストするデータファイルです。index.htmlはメインページです。virtual-scroll-list.vueは完成させる必要があるコンポーネントファイルです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動でページを更新すると、ページが表示されます。初期状態では、空のリストボックスが表示されます。
非同期データの読み込みとレンダリング
このステップでは、axios ライブラリを使用してデータを非同期で読み込み、レンダリングする方法を学びます。
virtual-scroll-list.vueファイルを開きます。mounted()ライフサイクルフックで、axiosを使用してdata.jsonファイルにリクエストを送信し、listデータを設定します。
mounted() {
// TODO: Completion of data requests
axios("./data.json").then((res) => {
this.list = res.data;
this.totalHeight = this.list.length * this.itemHeight; // calculate the total height
});
}
これにより、data.json ファイルからデータが取得され、list データプロパティに格納されます。また、totalHeight プロパティは list の長さと itemHeight に基づいて計算されます。
このステップを完了すると、data.json ファイルから読み込まれたデータで初期リストがレンダリングされるはずです。
仮想スクロールの実装
このステップでは、仮想スクロール機能を実装する方法を学びます。
virtual-scroll-list.vueファイルを開きます。scrollイベントハンドラを実装します。
methods: {
scroll(e) {
this.start = Math.floor(e.currentTarget.scrollTop / this.itemHeight);
},
}
scroll イベントハンドラは、現在のスクロール位置に基づいて、表示されるリスト項目の start インデックスを計算します。
このステップを完了すると、仮想スクロール機能が実装され、リスト項目はビューポート内に表示されるときのみレンダリングされるようになります。最終的な効果は次の図の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。
