忘れないように記録しとこ

カバの樹

1万件でも100万件でも「vue-virtual-scroller」でリストをスクロールする

2019年9月9日

完全版を表示する

vue-virtual-scrollerとは

 

vue-virtual-scrollerは、あらゆる量のデータを高速でスクロールできるライブラリです。
100万件のデータでも非常に軽いスクロールを実装することが可能です。（管理人テスト済み
高さの調整がシビアですが、そこさえクリアできればリストのタグに依存することなく、データ量に依存しない軽いスクロールが導入できます。

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install --save vue-virtual-scroller

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-virtual-scroller@1.0.0-rc.2/dist/vue-virtual-scroller.css">
<script src="https://cdn.jsdelivr.net/npm/vue-virtual-scroller@1.0.0-rc.2/dist/vue-virtual-scroller.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/Akryum/vue-virtual-scroller

 

導入手順

あらゆる量のデータを高速でスクロールします。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

（2）WEBページの場合

なし

2.メソッドを設定

let list = [];
for(let i=0; i<10000; i++)
{
  list.push({
    no: i,
    title: 'title-' + i,
  });
}

Vue.use(VueVirtualScroller);

let app = new Vue({
  el: '#app',
  data: {
    list: list
  }
});

3. <recycle-scroller>テンプレートを準備

HTMLに直記載の為、ケバグケースで実装します。
コンポーネントを利用する場合は、<RecycleScroller> でも大丈夫です。

<div id="app">
  <div id="box">
    <recycle-scroller
      class="scroller"
      :items="list"
      :item-size="32"
      key-field="no"
      v-slot="{ item }"
    >
      <div class="user">
        <h3>{{ item.title }}</h3>
      </div>
    </recycle-scroller>
  </div>
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

あらゆる量のデータを高速でスクロールできるライブラリでした。
この手のライブラリを色々触ってきましたが、このライブラリが一番軽い気がします。
Githubを見ると、スポンサーが付いたオープンソースなので、今後の保守の面でも信用できそうです。

今日はこの辺でー

  • B!