[vue.js] 무제한 스크롤 (infiniteHandler)
1. npm 설치
npm install vue-infinite-loading -S
2. <script>에 모듈 import
import InfiniteLoading from 'vue-infinite-loading';
3. export default 안에 components 추가
components: {
InfiniteLoading
},
4. 초기값 설정
data: () => {
return {
contents: [],
startNo: 1
}
},
5. html에 infinite 태그 추가
<infinite-loading @infinite="infiniteHandler" spinner="waveDots">
<div slot="no-more" style="color: rgb(102, 102, 102); font-size: 14px; padding: 10px 0px;">NO MORE</div>
</infinite-loading>
* spinner = 본인이 원하는대로 변경 가능
6. methods 안 infiniteHandler 추가
infiniteHandler($state) {
axios
.get("데이터 가져올 API URL", {
params: {
"넘길 파라미터": "파라미터",
"category": "001"
}
}).then(({data}) => {
setTimeout(() => {
if (data.length) {
this.startNo += 20;
this.contents = this.contents.concat(data);
console.log("after", this.contents.length, this.startNo);
$state.loaded();
} else {
$state.complete();
}
}, 1000)
});
}