무한 스크롤

• 이번에는 제가 구현한 뷰에서 사용하는 무한 스크롤 예시입니다

<template>
  <ul
    ref="notification-list"
    class="list"
    @scroll="handleNotificationListScroll"
  >
    <li
      v-for="(notification, index) in notifications"
      :key="`${notification.id}${index}`"
    >
      ...
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    notifications() {
      return this.$store.getters["notification/notifications"];
    }
  },

  methods: {
    // 무한 스크롤 정의
    handleNotificationListScroll(e) {
      const { scrollHeight, scrollTop, clientHeight } = e.target;
      const isAtTheBottom = scrollHeight === scrollTop + clientHeight;
      // 일정 한도 밑으로 내려오면 함수 실행
      if (isAtTheBottom) this.handleLoadMore();
    },

    // 내려오면 api 호출하여 아래에 더 추가, total값 최대이면 호출 안함
    handleLoadMore() {
      if (this.notifications.length < this.total) {
        const params = {
          limit: this.params.limit,
          page: this.params.page + 1
        };
        this.$store.commit(
          "notification/SET_PARAMS",
          this.filterValue ? { ...params, type: this.filterValue } : params
        );
        this.dispatchGetNotifications(false);
      }
    },

    // 스크롤을 맨위로 올리고 싶을 때
    handleClickTitle() {
      this.$refs["notification-list"].scroll({ top: 0, behavior: "smooth" });
    },

    // 새로고침
    handleClickRefresh() {
      this.$refs["notification-list"].scroll({ top: 0 });
      this.dispatchGetNotifications(true);
    },

    // 처음 렌더링시 이전 알림 불러오기 or reset=true시 새로고침, false시 이전 목록에 추가
    dispatchGetNotifications(reset) {
      this.$store.dispatch("notification/getNotifications", reset);
    }
  }
};
</script>
<style>
.list {
  height: calc(100vh - 70px);
  overflow: auto;
}
</style>

• 가본적인 사용법은 위와 같습니다.
• 추가 api 호출할 지점을 isAtTheBottom로 잡고 스크롤이 내려오면 api를 새로 호출해 이전에 있던 배열에 추가합니다.
• 새로고침 클릭시 ref 잡았던 지점의 top으로 스크롤을 옮깁니다.
• store 부분은 api 호출받아서 데이터 넣고 삭제하는 기본적인 부분이라 첨부하지 않았습니다.

#vue