vue - 무한 스크롤

프로젝트를 진행하며 무한 스크롤 기능이 필요하여 구현하였다. 다음에도 참고하고자 이곳에 기술한다.

 

template

<div
  class="list"
  @scroll="handleNotificationListScroll"
>
  <-- 반복할 리스트 컴포넌트 -->
  <NoticeListForm
    v-for="(list, index) in pushList"
    :key="index"
    img-src="https://cdn.vuetifyjs.com/images/john.jpg"
    notice-name="네임"
    date="날짜"
    content="컨텐츠"
    :read="false"
  />
</div>

script

data: () => ({
  // 10개의 리스트를 보여주기 위한 더미 데이터
  pushList: [1,2,3,4,5,6,7,8,9,10]
}),
methods: {
  handleNotificationListScroll(e) {
    const { scrollHeight, scrollTop, clientHeight } = e.target;
    const isAtTheBottom = scrollHeight === scrollTop + clientHeight;
    // 일정 이상 밑으로 내려오면 함수 실행 / 반복된 호출을 막기위해 1초마다 스크롤 감지 후 실행
    if(isAtTheBottom) {
      setTimeout(() => this.handleLoadMore(), 1000)
    }
  },

  // 내려오면 api를 호출하여 아래에 더 추가,
  handleLoadMore() {
    console.log("리스트 추가")
    // api를 호출하여 리스트 추가하면 됨, 현재는 pushList에 1개의 index 추가
    this.pushList.push(2)
  },
}

style

.list{
  height: calc(100vh - 70px);
  overflow: auto;
}

 

스크롤 이벤트를 통하여 스크롤이 일정 이상 내려오면 pushList를 추가하여 보여준다. 이 부분에서 api를 호출하여 pushList에 추가하면 된다. 또한 자연스러운 리스트 추가 혹은 반복적인 api 호출을 막기위해 setTimeout 함수를 사용하였다.