Vue 및 Nuxt로 무한 스크롤을 구현하는 방법

무한 스크롤은 사용자가 아래로 스크롤하여 현재 콘텐츠 페이지의 맨 아래에 도달한 다음 콘텐츠의 다음 페이지가 로드되고 표시되는 웹 사이트 및 응용 프로그램의 기능입니다digital ocean.

내 API 응답은 django rest에 구축된 다음과 같습니다.


이제 페이지 번호를 늘리고 다음 페이지 결과에 대한 요청을 보내고 사용자가 페이지 맨 아래로 이동할 때 데이터를 초기 데이터 개체와 병합하려고 합니다.

data() {
        return {
            productObj:[],
            rawObj:[],
            page:1,
        }
    },

mounted() {
    this.scroll()

   },

async fetch() {
       await this.fetchData()

   },

 methods:{
    scroll () {
      window.onscroll = () => {
        let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight

        if (bottomOfWindow) {
            this.page++
            if(this.rawObj.next){
                this.fetchData()
            }
        }
      }
    },
 async fetchData(){
        try{
           const res = await this.$axios.$get(`productByPagination/?page=${this.page}`)
           this.productObj.push(...res.results)
           this.rawObj = res

       }
       catch({response}){
           console.log(response)
       }


    },
}

설명

첫 번째 위치에서 데이터에 페이지 번호 1을 설정하고 첫 번째 페이지 데이터를 저장하기 위한 초기 요청을 보냅니다. 그런 다음 스크롤 방법은 사용자가 페이지 하단으로 이동하면 페이지 번호가 증가하고 두 번째 페이지 데이터를 로드하라는 요청을 보냅니다.

let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight

bottomOfWindow 사용자가 페이지 맨 아래로 이동하면 true를 반환합니다. 그리고 우리가 참이면 이 코드 조각이 실행될 것입니다.

if (bottomOfWindow) {
            this.page++
            if(this.rawObj.next){
                this.fetchData()
            }
        }

메모

productObj:[],에는 원하는 결과만 저장했고 rawObj:[],에는 전체 응답 개체를 저장했습니다. 그리고 rawObj에는 사용 가능한 모든 데이터를 이해하는 데 도움이 되는 next가 있습니다. 가능한 경우 다른 요청을 보내거나 다른 요청 보내기를 중지합니다.


API 응답에 따라 상황이 다를 수 있습니다.