2022/3/12

【Vue.js】Element UiでInfinityScrollを導入する方法！APIや配列と組み合わせるには？

この記事からわかること

Vue.jsのライブラリ「Element Ui」でInfinityScrollを導入する方法
無限スクロールの実装方法
配列やAPIでアレンジするには

index

[open]

Element Uiを導入する方法
オンデマンドでInfinityScrollを有効化する方法
InfinityScrollを連想配列(API)にアレンジ

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

SNSや記事投稿アプリ、ブログなどを作成している時にタイムラインに記事を全て表示させないように無限スクロールを実装したくなりました。

Vue.jsのライブラリである「Element Ui」を使えば簡単に導入できそうだったので導入方法と実際にアレンジして組み込む方法をまとめて行きたいと思います。

Element Uiを導入する方法

そもそもElement Ui自体を導入して有効化する方法は2つあります。

フルインストール
オンデマンドインストール

今回は「オンデマンドインストール必要なコンポーネントだけを選択して導入する方法」＝の場合にInfinityScrollを組み込む方法をまとめていきます。

フルインストールの場合は設定不要で使えるはずですので試してみてください。

オンデマンドでInfinityScrollを有効化する方法

InfinityScrollをオンデマンドで使用できるようにするにはplugins ＞ element.jsに通常コンポーネント同様、読み込みuseを使って有効化させます。

├── Vue CLIプロジェクト
│    ├── node_modules
│    ├── babel.config.js
│    ├── package.json
│    ├── public
│    ├── README.md
│    ├── src
│          ├── App.vue
│          ├── assets
│          ├── components
│          ├── main.js
│          └── plugins
│                  └── ★ element.js
│    └── yarn.lock

plugins ＞ element.js

import Vue from 'vue'
import {
    Alert,
    Input,
    InfiniteScroll,
} from 'element-ui'
import lang from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale'

locale.use(lang)

const components = [
    Alert,
    Input,
];

const Element = {   
    install(Vue) {
      components.forEach(component => {
      Vue.component(component.name, component)
      })
    }
}

Vue.use(InfiniteScroll);
Vue.use(Element, { locale })

通常のコンポーネントの場合、13〜18行目のように読み込んだコンポーネントをVueオブジェクトにcomponentsとして紐づけ、Element独自のタグとして使用できるようになります。

<el-alert v-if="$store.state.success" 
    :title="投稿に成功しました"
    type="success"
    center
    description="2秒後にリダイレクトします..."
    :closable="false">
</el-alert>

しかしInfinityScrollはElement独自のタグとしては定義されていないのでcomponentとしての紐付けではなくuseのみで機能してくれます。

私はコンポーネントをひとまとめに定義しVueオブジェクトに紐づけていました。それもありVueオブジェクトにライブラリを適応させる基本的な流れを忘れていたためuseさせるのを忘れており使えない問題が発生していました。

Vueオブジェクトにライブラリを適応させる基本的な流れ

ライブラリをelement.jsに読み込む
Vueオブジェクトに紐づける

InfinityScrollを連想配列(API)にアレンジ

InfinityScrollのデフォルトのコードはv-forで繰り返し表示させる値がcount(ただの数字)になっています。この部分に繰り返し表示させたいデータ(記事情報)などを持ってこればOKです。

<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>

単純にcountの部分を連想配列を持った変数に置き換えれば無限スクロールは機能してくれます。

表示する数を指定し、一番下にスクロール時に追加で表示していくタイプを実装したい時は以下のコードで可能です。

連想配列を指定数分スライス
指定数は変数で用意
スクロールがあった時に指定数をプラス

<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="board in limitBoards" class="infinite-list-item">
        <p class="c-board_title u-txtxl">{{ board.board_title }}</p>
        <p  class="c-board_text u-padding-s">{{ board.board_text[0] }}</p>
        <p class="c-board_day">{{ board.created_at }}</p>
    </li>
  </ul>
</template>

<script>

  export default {
    data() {
        return {
            // 最初に表示させるデフォルト値を定義
            count: 10,
        };
    },
    computed: {
    boards() {
        // APIで取得している連想配列
        return this.$store.state.boards;
    },
    limitBoards() {
        // スクロールごとに変化していくスライスされた連想配列
        return this.boards.slice(0,this.count)
    },
    }
    methods: {
      load () {
        // スクロールがあるたびに表示を２つ増やす
        this.count += 2
      }
    }
  }
</script>