無限スクロールしたいなぁと思ったら、
vue-infinite-loadingという便利があったので、その時の備忘録。
おぉ無限スクロールもできた(*´ω`*)
— きらぷか📚積読ハウマッチ開発中【事前登録はじめました】 (@kira_puka) July 6, 2019
Vueもvue-infinite-loadingもすごい(*´ω`*) pic.twitter.com/dtp1sxYUyz
準備する
インストール
$ npm i --save vue-infinite-loading
pluginの作成
plugins/vue-infinite-loading.ts
を用意
import Vue from "vue"; import InfiniteLoading from "vue-infinite-loading"; Vue.use(InfiniteLoading);
nuxt.config.tsの設定
作ったpluginを追加する。
const config: NuxtConfiguration = { plugins: [ { src: "~/plugins/vue-infinite-loading", ssr: false }, ], }
つかってみる
シンプルにはこんな感じ。
- リストの最後に
infinite-loading
を追加して、 - リストの一番下に来たら、
@infinite="infiniteHandler"
が発火 infiniteHandler()
で次を読み込んで、items
に追加
<template> <div> <template v-for="item in items"> <!-- リストとして表示するなにか --> </template> <infinite-loading :identifier="identifier" @infinite="infiniteHandler"> <!-- slotでメッセージをカスタマイズできる --> <div slot="no-more">もう読み込めないときのメッセージ</div> <div slot="no-results">結果がないときのメッセージ</div> </infinite-loading> </div> </template> <script lang="ts"> import { Component, Vue } from "nuxt-property-decorator"; @Component export default class extends Vue { items: any[] = [] identifier: number = 1 loading: boolean = false; async infiniteHandler($state: any) { if (this.loading) return; // 読み込み中ならスキップ try { this.loading = false; const res = await this.$axios.get("..."); this.items.push(...res); // 読み込みが終わって、まだ読み込めればloaded()を呼ぶ $state.loaded(); } catch(error) { // もう読み込めなければcomplete()を呼ぶ $state.complete(); } finally { this.loading = false; } } }
infiniteHandler
が呼ばれたあとに、
- 読み込みが完了して、まだ読み込めるものがあれば、
loaded()
を呼ぶ - もう読み込むものがない場合は、
complete()
を呼ぶ
ハマった点
infiniteHandler
が無限に呼ばれる
ローディングが長いと、何度もinfiniteHandler
が呼ばれる。。
なので、loading
変数を用意して、読み込み中のときはスキップするようにした。
$state.complete()
したあとに、リセットしたい
エラーや全部読み込んだあとに、$state.complete()
を呼ぶと、
もう一度読み込み直すときに、infiniteHandler
が呼ばれなくなる。。
リセットする必要があるっぽく、propsのidentifier
を更新すると、resetされるっぽい。
必要に応じて、this.identifier += 1;
すればOK
以上!!
参考になる書籍
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発
- 作者: 花谷拓磨
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/10/17
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
- 作者: MIO
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: Kindle版
- この商品を含むブログを見る
改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ(NextPublishing))
- 作者: 渡邊達明
- 出版社/メーカー: インプレスR&D
- 発売日: 2018/10/05
- メディア: オンデマンド (ペーパーバック)
- この商品を含むブログを見る