【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>
しかし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 () { // スクロールがあるたびに表示を2つ増やす this.count += 2 } } } </script>
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。