Vue.js vue-infinite-loadingを使用して無限スクロールを実装する
- 作成日 2020.03.02
- 更新日 2020.07.21
- Vue.js
- vue-infinite-loading, Vue.js
vueのライブラリである「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>
実行してみます。
npm run serve
ブラウザから http://プライベートIP:8080 にアクセスすると itemが3秒毎に5つずつloadingされていることが確認できます。
-
前の記事
reveal.jsを利用してスライドを作成する 2020.03.02
-
次の記事
nuxt.js @nuxtjs/sitemapを使ってsitemap.xmlを生成する手順 2020.03.02
コメントを書く