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

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

この記事からわかること

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

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

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>

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

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

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 () {
        // スクロールがあるたびに表示を2つ増やす
        this.count += 2
      }
    }
  }
</script>

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index