Vue.js 에서 스크롤 페이징(InfiniteLoading) 적용하기

 

 

 

안녕하세요. 씨앤텍 시스템즈 입니다.

 

이번 글은 Vue.js 에서 스크롤 페이징(InfiniteLoading) 적용하는 방법에 대해서 정리해 보았습니다.

 

InfiniteLoading사용방법은 https://peachscript.github.io/vue-infinite-loading/를 참고했습니다.

 

스크롤 페이징을 적용하기 위해 아래의 세 단계를 거쳐야 합니다.

---

1. InfiniteLoading 모듈 설치

2. .vue 파일에 InfiniteLoading 적용

3. 스크립트 적용

---

 

그림1. 스크롤페이징 구현 화면 *출처:공식문서

 

 

위의 이미지는 공식문서에서 제공하고 있는 InfiniteLoading을 적용했을 때의 화면입니다.

---

1. VueInfiniteLoading 모듈 설치

InfiniteLoading을 사용하기 위해 모듈을 설치합니다.

npm install vue-infinite-loading -S

 

2. InfiniteLoading을 적용하고자 하는 화면에 import합니다.

     2-1. 결과값을 보여줄 화면을 구성합니다.

     데이터 베이스에 저장된 값을 가져와 게시판 형식으로 보여줍니다.

 

     2-2. InfiniteLoading을 추가합니다.

     table 의 아래에 infinite-loading 태그를 추가합니다.

     @infinite 는 infinite-loading이 실행되기 위한 메소드를 가리킵니다.

     spinner는 infinite-loading이 실행될 때 보이는 스피너 형식입니다.

     이 스피너 형식에는 defualt, spiral, circles, bubbles, waveDots 총 다섯가지가 있습니다.

 

3. 스크립트를 적용합니다.

     3-1. InfiniteLoading을 사용하기 위해 import 합니다.

import InfiniteLoading from 'vue-infinite-loading'

 

    3-2. data에 limit 변수를 추가합니다.

data() {
    return {
      limit: 0,
    }
  }

    3-3. InfiniteLoading을 컴포넌트에 불러옵니다.

components: {
    appMyModal: DelPopup,
    InfiniteLoading
  }

    3-4. infiniteHandler 메소드를 구현합니다.

infiniteHandler($state) {
      this.$http.get(api + (this.limit + 10)) //api에 url 삽입
        .then(response => {
          setTimeout(() => { //스크롤 페이징을 띄우기 위한 시간 지연(1초)
            if (response.data.length) {
              this.users = this.users.concat(response.data);
              $state.loaded(); //데이터 로딩
              this.limit += 10 
              if (this.users.length / 10 == 0) {
                $state.complete(); //데이터가 없으면 로딩 끝
              }
            } else {
              $state.complete();
            }
          }, 1000)
        }).catch(error => {
          console.error(error);
        })
    }

 

    3-5. 불러올 api에 limit 변수를 추가합니다.

created() {
    this.$http.get(api + this.limit)
      .then((response) => {
        this.users = response.data
      })
  }

 

 

4. (백엔드)라우터에서 데이터를 불러옵니다.

router.get('/limit/:id', function(req, res) { 
  var sql = 'SELECT * FROM TBL_DR ORDER BY DR_DATE DESC LIMIT ?, 10';
  let id = parseInt(req.params.id);
  connection.query(sql, id, function(err, rows) {
    if (err) {
      res.redirect('/#/admin/file-list')
    } else {
      res.send(rows);
    }
  })
});

---

위의 코드를 실행하면 아래와 같은 결과를 볼 수 있습니다.

 

 

 

요즘에는 많은 기업들이 일반적인 페이징 보다는 무한스크롤 혹은 스크롤페이징을 더 선호하고 있습니다.

숫자를 클릭해서 사용하는 것 보다 스크롤을 내리면서 데이터가 있는만큼 로딩되는

스크롤페이징을 사용해 화면을 구현해보는 것도 나쁘지 않습니다.

 

 

감사합니다.