【Vue.js】無限スクロール処理

ライブラリ公式ページ

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();で初期化できます

# Vue
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×