コラム

[Vue.js]無限スクロールプラグインのvue-virtual-scroll-list使用例

今回は無限スクロールプラグインのvue-virtual-scroll-listの使用方法を説明していきたいと思います。
無限スクロールプラグインの比較は無限スクロールプラグイン比較 をご覧下さい。

環境

Vue 2
vue-virtual-scroll-list 2.3.2

Vue.jsプロジェクト作成

次のコマンドを実行

vue create [プロジェクト名]

スクローラーを試すだけなのでDefault ([Vue 2] babel, eslint)を選択 (Vue 3だと動きません)

? Please pick a preset:
  router-sample ([Vue 2] babel, router, eslint)
  aa ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

プロジェクトが作成したら、[プロジェクト名]のディレクトリに移動してインストールコマンド実行

 npm install vue-virtual-scroll-list --save

実装

画面のイメージ

ディレクトリ構成

プロジェクト名/
           ├─ src/
                ├─ App.vue ←メインロジックを記述
                ├─ main.js ←変更なし
                ├─ Item.vue ←追加            

App.vueにメインロジックを実装、Item.vueに行の実装をします。

Item.vue

<template> ①
	<div style="display: flex;border-bottom:solid 1px;">
		<div ref="id" style="width:100px;border-right:solid 1px;">{{ source.id }}</div>
		<div ref="text" style="width:100px;">{{ source.text }}</div>
	</div>
</template>

<script>
  export default {
    name: 'item-component',
    props: {
      index: { ②
        type: Number
      },
      source: { ③
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>

① 行のテンプレートを記述。例では「id」と「text」の2項目を表示しています。下に定義してある「source」のプロパティを表示します。
② indexを定義しています。これにより上から順にindexが振られるので、項目に表示したい時などに使用します。
③ 表示に使用するデータの型を定義します。テーブル表示に使用する1行分のデータがこのプロパティに入ってきます。

App.vue

<template>
  <div id="app">
    <center>
    <div style="width:250px;border:solid 1px;">
      <div style="display: flex;border-bottom:solid 1px;background:lightgray">
        <div style="width:100px;border-right:solid 1px;">ID</div>
        <div style="width:100px;">タイトル</div>
      </div>
      <virtuallist ref="vlist" style="height: 360px; overflow-y: auto;"  ①
        :data-key="'id'" 
        :data-sources="items" 
        :data-component="itemComponent"
        v-on:tobottom="onScrollToBottom"
      />
    </div>
    </center>
  </div>
</template>

<script>
import virtuallist from 'vue-virtual-scroll-list' ②
import Item from './Item' ③

export default {
  name: 'App',
  components: {
    virtuallist ④
  },
  data() {
    return { ⑤
      itemComponent: Item,
      items: [],
      itemCounter:1
    }
  },
  created(){ ⑥
    for(let i = this.itemCounter; i <= 50;this.itemCounter++, i++)
    {
      this.items.push({
        id: i,
        text: 'テキスト'+ i,
        });
    }
  },

  methods:{
    onScrollToBottom(){ ⑦

      for(let i = this.itemCounter;i<=this.itemCounter + 50; this.itemCounte++, i++ ){
        this.items.push({
          id: i,
          text: 'テキスト'+ i,
        });
      }
      this.itemCounter += 50
    }
  }
}
</script>

<style>
 省略
}
</style>

① スクローラーの定義をします。次の項目を設定します。

項目説明
data-key表示するデータのキーを設定
data-sources表示するデータソースを設定
data-component行の表示情報を定義しているコンポーネントを設定
v-on:tobottomスクロールが一番下まで行った時に呼ばれるメソッドを設定
(ここでデータの追加を行う)

② vue-virtual-scroll-listをインポートします。
③ Item.vueをインポートします。
④ インポートした vue-virtual-scroll-listをコンポーネントとして設定します。
⑤ 「data-component」に設定する変数を定義します。インポートしたItem.vueモジュールを設定しています。
「items」変数は表示するデータで「data-sources」で設定しています。
「itemCounter」変数はデータを数を把握する為に今回の例では使用していますが、サーバから取得する際は使用する必要がないと思います。
⑥ 初期表示データを作成しています。サーバから取得する際はそのように変更してください。
⑦ スクロールが一番したまで行った時に呼ばれるメソッドです。ここでデータの追加処理を行います。サーバから取得する際はそのように変更してください。

Refsの使用

行やセルへのRefsを使用したアクセスは少し複雑で次の用にアクセスします。

//virtuallistタグへのrefをvlistとして設定し、その子要素にアクセスする必要があります。
//DOMの一番めのIDセルへアクセスしている例
this.$refs.vlist.$children[0].$children[0].$refs.id.style.background="red"

//DOMの2番目のIDセルへのアクセスしている例
this.$refs.vlist.$children[1].$children[0].$refs.id.style.background="red"

//DOMの一番めのtextセルへアクセスしている例
this.$refs.vlist.$children[0].$children[0].$refs.text.style.background="red"

//DOMの2番目のtextセルへのアクセスしている例
this.$refs.vlist.$children[1].$children[0].$refs.text.style.background="red"

最後に

以上、vue-virtual-scroll-listの使用方法の説明でした。
このプラグインは、リストのDOM要素が表示している部分のみ存在するので、大量データをスマフォで表示したい時など採用するのが良いのではないかと思います。
他のプラグインとの比較は無限スクロールプラグイン比較 で行っているので興味のある方は見てみて下さい。

続けてお読みください

[Docker]SpringBootのDockerイメージ作成①

この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせ
お電話でのお問い合わせ 03-5820-1777(平日10:00〜18:00)
よくあるご質問