ライブラリ公式ページ
https://peachscript.github.io/vue-infinite-loading/
ライブラリインストール
1
| npm install vue-infinite-loading -S
|
コンポーネント登録
main.js
1
2
3
4
5
6
7
| import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
slots: {
noResults: '',
noMore: ''
}
})
|
HTML コード
1
2
3
4
5
6
| <template>
<div>
<div v-for="hoge in hoge_list"></div>
<infinite-loading ref="infiniteLoading" spinner="bubbles" v-on:infinite="infiniteHandler"></infinite-loading>
</div>
</template>
|
JavaScript コード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| infiniteHandler() {
if () {
this.get_news_list();
} else {
console.log("無限スクロール完了")
this.$refs.infiniteLoading.stateChanger.complete();
},
},
async get_news_list() {
const params = {
page: this.page,
};
const res = await this.gm_api_get("news", params)
this.page += 1;
this.$refs.infiniteLoading.stateChanger.loaded();
}
|
this.$refs.infiniteLoading.stateChanger.reset();で初期化できます