vue-infinite-loadingを使って無限スクロール
- yarn add vue-infinite-loading
- plugin/infiniteloading.js
import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'
Vue.component('infinite-loading', InfiniteLoading)
- nuxt.config.js
plugins: [{ src: '~/plugins/infiniteloading', ssr: false }]
vue
<template><div class="infinite-scroll">
<ul class="infinite-scroll-list">
<li class="infinite-scroll-list-item" v-for="i in this.count" :key="i">scroll {{ i }}</li>
</ul>
<infinite-loading
ref="infiniteLoading"
spinner="spiral"
@infinite="infiniteHandler">
<div slot="no-results"/>
</infinite-loading>
</template></div>
<script>export default {
name: 'InfiniteScroll',
data() {
return {
count: 20
}
},
methods: {
infiniteHandler() {
setTimeout(() => {
this.count += 20
this.$refs.infiniteLoading.stateChanger.loaded()
}, 1000)
}
}
}
</script>
0 件のコメント:
コメントを投稿