Nuxt.jsで「vue-infinite-loading」というプラグインを使って、検索結果を無限スクロールする方法を紹介します。
事前準備
まずは「vue-infinite-loading」プラグインをインストールします。
1 | $ npm install vue-infinite-loading --save |
pluginsディレクトリ配下にinfiniteloading.jsファイルを作成し、以下を追加します。
・infiniteloading.js
1 2 3 4 | import Vue from 'vue' import InfiniteLoading from 'vue-infinite-loading' Vue.use(InfiniteLoading) |
nuxt.config.jsのpluginsに「InfiniteLoading」を追加します。これで準備完了です。
・nuxt.config.js
1 2 3 4 5 6 7 | ... plugins: [ { src: '~/plugins/infiniteloading', ssr: false } ] ... |
無限スクロール実装
無限スクロールしたい検索結果の下に以下のコードを追加します。スクロールされるとinfiniteメソッドが呼び出されます。
検索結果が取得できなくなった場合はデフォルトだと「No more data :)」になっています。
変更したい場合は<span slot=”no-more”></span>と<span slot=”no-results”></span>の中に文言を追加することで変更できます。
spinnerは変更することで読み込み中のローディングをカスタマイズできます。
■カスタマイズ
- default
- circle
- bubbles
- spiral
- waveDots
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ... <form @submit.prevent="search" method="post" action="?"> <label> <input v-model="name" type="text" placeholder="ここで検索"> </label> </form> ... <infinite-loading ref="infiniteLoading" spinner="waveDots" @infinite="infinite"> <span slot="no-more">検索結果は以上です</span> <span slot="no-results">検索結果はありません</span> </infinite-loading> ... |
infiniteメソッドが呼び出されると、APIを通してデータを取得してきます(API側の取得処理は割愛)。setTimeoutで3秒間指定した後、実行しています。
offsetを++していることで取得する次に取得すべきデータを判定しています。
取得データがある場合は、this.$refs.infiniteLoading.stateChanger.loaded()を呼び出し、取得データがなくなると、this.$refs.infiniteLoading.stateChanger.complete()メソッドを呼び出します。
また今回は検索機能もあるため、検索を実行した場合はthis.$refs.infiniteLoading.stateChanger.reset()でローディング結果をリセットして再度データを1から取得してきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import InfiniteLoading from 'vue-infinite-loading' export default { ... components { InfiniteLoading }, data () { return { name: '', searchParam: { name: '', offset: 0, per: 5 } } }, methods: { search () { this.$refs.infiniteLoading.stateChanger.reset() this.searchParam.name = this.name this.searchParam.offset = 1 this.$store.dispatch('test/searchTests', { searchParam: this.searchParam }) }, infinite () { setTimeout(() => { this.searchParam.name = this.name this.searchParam.offset += 1 this.$store.dispatch('test/searchInfiniteTests', { searchParam: this.searchParam }).then((result) => { if (result.length >= this.searchParam.per) { this.$refs.infiniteLoading.stateChanger.loaded() } else { this.$refs.infiniteLoading.stateChanger.complete() } }) }, 3000) } } ... } |
以上、Nuxt.jsで「vue-infinite-loading」を使って、検索結果を無限スクロールする方法でした。