[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)

});

}