QuasarのVirtualScroll

せしまるです。

本日は業務で使ったq-virtual-scrollについてメモ残し_φ(･_･

VirtualScroll（仮想スクロール）とは？

リスト形式で表示しているものなどは、項目数分要素を作ってしまう（レンダリングしてしまう）のですが、
VirtualScrollを使用すると、表示している項目＋アルファ分しかレンダリングしないのです。
スクロールしたときも、同じ様に表示項目＋アルファ分しかレンダリングしません。

そんな必要あるのか？と思う人もいると思います。
では、仮にリストに表示する項目が何万、何十万件もあるとしましょう。
VirtualScrollを使用しない場合は項目数分レンダリングするので、アプリ（というかブラウザ？）がめっちゃ重くなります（業務内でもこれが問題だった）。
こうなると、他の機能も正常に動かなかったり、ボタン1つ押すのに数秒かかったりなど…使い物にならなくなる場合があります。

VirtualScrollを使用すると、表示項目＋アルファ分しかレンダリングしないので、めっちゃ軽い！
ボタンも即反応！快適快適(・∀・)

使い方

基本は公式ドキュメントから。

test.vue

<template>
 <!--q-virtual-scrollで表示するリストのデータを指定する-->
 <q-virtual-scroll :items="items" separator>
  <!--v-slotで1データとindex-->
  <template v-slot="{ item, index }">
   <!--q-itemのkeyにindexを指定-->
   <q-item :key="index" dense>
    <q-item-section>
     <q-item-label>#index:{{ index }} - {{ item.message }}</q-item-label>
    </q-item-section>
   </q-item>
  </template>
 </q-virtual-scroll>
</template>

<style>
/* スクロールのスタイル指定もできる */
.scroller {
 height: 100%;
}
</style>

<script>
items = new Array<string>();

for(let i = 0; i < 100; i++){
  items.push(`hello!Mr.${i}`);
}

Object.freeze(items);

export default {
  data() {
    return {
      items
    }
  }
}
</script>

感想

最初はvue-virtual-scroller使おうとしてたけど、q-virtual-scrollのほうが簡単に感じた（個人差）

おわり