Vue.js vue-infinite-loadingを使用して無限スクロールを実装する

作成日 2020.03.02
更新日 2020.07.21
Vue.js
vue-infinite-loading, Vue.js

vueのライブラリである「vue-infinite-loading」を使えば、簡単に無限スクロールが実現可能です。ここでは、簡単な使い方を記述してます。

1. 環境
2. プロジェクト作成
3. vue-infinite-loadingインストール
4. vue-infinite-loading使い方

環境

OS CentOS 8.0.1905 (Core)
node v12.13.1
npm 6.13.2
@vue/cli 4.1.1

プロジェクト作成

loading-testという名前でプロジェクトを作成してます。

vue create loading-test

作成時はdefaultを選択してます

Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)

vue-infinite-loadingインストール

vue-infinite-loadingをインストールします。

## プロジェクトに移動
cd loading-test

## インストール
npm i -S vue-infinite-loading

vue-infinite-loading使い方

src配下のmain.jsを下記の通りに編集します

import Vue from 'vue'
import App from './App.vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.config.productionTip = false
Vue.use(InfiniteLoading)

new Vue({
  render: h => h(App),
}).$mount('#app')

src/components配下のHelloWorld.vueを下記の通りに編集します。

<template>
  <div class="infinite-scroll">    
    
      <div class="list-item" v-for="i in this.start" :key="i">item {{ i }}</div>
    
    <infinite-loading 
      ref="infiniteLoading" 
      spinner="spiral"
      @infinite="infiniteHandler">
      <div slot="no-results"/>
    </infinite-loading>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      start: 5
    }
  },
  methods: {
    infiniteHandler() {
      setTimeout(() => {
        this.start += 5
        this.$refs.infiniteLoading.stateChanger.loaded()
      }, 3000)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {  
  margin: 0 10px;
}
a {
  color: #42b983;
}
.list-item {
  padding: 15px;
  height: 25px;  
  margin:  0 auto;
  border-bottom: 1px solid #ddd;  
  width: 800px;
}
</style>

実行してみます。