Morioh
Login
호민 최

호민 최

11 months ago

Vue.js를 사용한 무한 스크롤: 단계별 가이드

이 단계별 가이드에서 Vue.js로 무한 스크롤을 구현하는 방법을 알아보세요. 무한 스크롤을 사용하면 사용자가 콘텐츠를 스크롤하고 참여하도록 유지할 수 있습니다.

무한 스크롤을 사용하면 사용자가 페이지를 아래로 스크롤할 때 웹 페이지에 새 콘텐츠가 로드되므로 사용자가 새 페이지를 클릭하거나 페이지를 새로 고치지 않고도 새 콘텐츠를 볼 수 있습니다. 이 기능은 많은 양의 데이터나 이미지를 한 번에 로드하는 것보다 사용자가 필요로 할 때마다 로드하려는 경우에 특히 유용합니다.

수년에 걸쳐 Twitter, Facebook 및 Instagram과 같은 소셜 네트워킹 사이트는 무한 스크롤을 대중화했습니다. 이 자습서에서는 사용자 인터페이스 및 단일 페이지 애플리케이션을 빌드하기 위한 JavaScript 프레임워크인 Vue를 사용하여 무한 스크롤을 구현합니다. 시작하자!

Vue 시작하기

Vue는 가상 DOM이 있는 경량 프레임워크입니다. 데이터를 선언적으로 DOM에 렌더링하는 방법을 제공하고 양방향 데이터 바인딩을 사용하여 데이터가 변경될 때 DOM을 최신 상태로 유지합니다.

Vue 3에 대해 정말 감사하게 생각하는 것은 코드의 간결함입니다. 스크립트, HTML 및 스타일을 포함한 모든 것이 단일 파일 내에 자체 위치를 가지고 있습니다. 이 솔루션은 우리 프로젝트와 같은 가장 간단한 프로젝트에 이상적이며 아이디어를 만지작거리기 시작하는 데 탁월한 선택입니다.

프로젝트 설명

우리 애플리케이션에서는 다른 프로젝트에서 유용하게 사용할 수 있는 몇 가지 기능을 구현할 것입니다. 무작위 온라인 데이터 생성기에서 데이터를 다운로드합니다. 이 프로젝트 에서는 유용한 API와 현실적인 데이터를 제공하는 http://random-data-api.com 을 사용하여 실제 시나리오에서 응용 프로그램이 어떻게 작동하는지 확인할 수 있습니다.

각각의 새 데이터 배치에 대해 새 데이터가 브라우저에 다운로드되는 동안 짧은 메시지가 나타납니다. 이는 특히 API가 임의로 느리게 응답할 수 있는 정도를 고려할 때 항상 좋은 방법입니다. 따라서 사용자는 후드 아래에서 어떤 일이 일어나고 있다는 사실을 알게 됩니다.

데이터를 표시하는 그리드의 경우 석조 CSS 레이아웃을 사용합니다. 이 프로젝트에서 우리는 내가 찾을 수 있었던 가장 간단한 CSS 레이아웃 중 하나를 사용할 것입니다. 너무 많은 재작업 없이 다른 프레임워크에 맞게 쉽게 조정할 수 있습니다.

아래 이미지는 최종 결과를 보여줍니다.

Vue Infinite Scroll App Demo

프로젝트 아이디어는 매우 간단합니다. 페이지의 첫인상에서 첫 번째 데이터 배치가 브라우저에 다운로드되어 시각화됩니다. 사용자가 데이터를 시각화하는 구성 요소를 스크롤할 때 페이지 하단을 부딪히면 새로운 데이터 배치가 로드됩니다. 현재 시각화가 끝나면 새 데이터가 UI로 푸시되고 이를 수용할 수 있는 새 공간이 제공됩니다.

따라 하려면 GitHub 에서 이 프로젝트에 대한 전체 코드 리포지토리를 찾을 수 있습니다 . 다음 섹션에서는 코드의 가장 흥미로운 부분에 대해 자세히 설명합니다.

masonry요소

우리의 목표는 사용자가 "무한" 데이터를 포함하는 구성 요소의 맨 아래에 도달했을 때를 감지하는 것입니다. 소스 코드에서 이 구성 요소는masonry . 다음 세 가지 속성을 조작하여 이를 수행할 수 있습니다.

  • masonry.clientHeightmasonry: 요소 의 전체 높이에 대한 픽셀 수
  • masonry.scrollTop: 항목 목록에서 이미 스크롤한 픽셀 수
  • window.scrollHeight: 현재 항목 목록에 포함된 픽셀 수

다음 코드는 이 아이디어를 구현합니다.

  mounted() {
    const masonry = document.querySelector('#infinite-list');
    document.title = "Ethrnal Scroll Demo";
    masonry.addEventListener('scroll', e => {
      if (masonry.scrollTop + masonry.clientHeight >= masonry.scrollHeight) {
        this.getNextBatch(30);
      }
    })
  },
};

아래 이미지에서 세 변수가 상호 작용하는 방식을 시각화할 수 있습니다. 더하기 scrollTop 가 clientHeight보다 크면 scrollHeight목록의 끝으로 스크롤한 것이며 또 다른 항목 배치가 필요합니다.

Scrolltop Clientheight Scrollheight Demo Diagram

아래 이미지에서 콘텐츠의 끝으로 스크롤할 때 값이 어떻게 변경되는지 확인할 수 있습니다.

Values Change Reach List Bottom

목록 맨 아래에 도달했는지 확인하는 메커니즘을 지우고 나면 코드에서 이 확인을 추가할 좋은 위치를 찾아야 합니다. 자연스러운 장소는 scroll이벤트입니다. 따라서 앞뒤로 스크롤할 때마다 masonry구성 요소는 목록 맨 아래에 도달할지 여부를 제어할 수 있습니다.

mounted()주목할 가치가 있는 또 다른 사항 은 Vue가 제공하는 메서드 에서 스크롤 이벤트에 대한 리스너를 할당하여 구성 요소가 마운트된 후 코드를 실행할 수 있다는 것입니다 .

스크롤에 대해 더 논의하기 전에 애플리케이션이 처리할 데이터를 살펴보겠습니다.

  data() {
    return {
      loading: false,
      items: [],
      page_count: 0,
      sizes: ["tall", "taller", "tallest"]
    };
  },

에는 data()구성 요소의 상태가 있습니다. 자세히 살펴보겠습니다.

  • loading: 레이블을 표시할 true때 사용할 부울 변수입니다 . 파일 Loading next batch의 14행을 참조하십시오.App.vue
  • items[]: 표시된 데이터를 포함할 객체의 배열
  • page_count: 임의 소스에서 다운로드한 배치 수
  • sizes[]: 위에서 설명한 타일에 대한 세 가지 스타일의 레이블을 포함하는 배열
grid-container {
      display: grid;
      /* 1 /
      grid-auto-rows: 50px;
      / 2 /
      grid-gap: 10px;
      / 3 /
      grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
      / 4 */
      overflow: auto;
      height: 30vh;
      border: 2px solid;
      border-radius: 5px;
      text-align: center;
      margin: 0 0 35px 0;
    }
    .tall {
      grid-row: span 2;
      background-color: #7632ed;
    }
    .taller {
      grid-row: span 3;
      background-color: #925cef;
    }
    .tallest {
      grid-row: span 4;
      background-color: #b9a3de;
    }

위의 코드는 구성 요소 의 다른 타일을 정의한 <style>의 섹션 에 정의된 CSS의 세부 정보를 보여줍니다  . 선택기 , 및 는  다운로드한 데이터에 무작위로 할당됩니다.App.vuemasonrytalltallertallest

getNextBatch(size) {
  this.loading = true;
  axios.get("https://random-data-api.com/api/v2/users?size=" + size + "&amp;amp;response_type=json").then((response) =&amp;gt; {
    response.data.map((x) =&amp;gt; {
      const new_item = {
        name: x.first_name + " " + x.last_name,
        dob: x.date_of_birth,
        location: x.address.state,
        size: this.sizes[Math.floor(Math.random() * this.sizes.length)]
      };
      this.items.push(new_item)
    })
    this.loading = false;
    this.page_count++;
  });
}

getNextBatch위에 표시된 Vue 애플리케이션의 유일한 메서드에서 무작위 소스의 데이터 배치 로드를 구현합니다 . 를 사용하여 임의 데이터 소스 API에서 새로운 항목 배치를 다운로드하여 axios.get()원하는 항목 수를 지정합니다. 데이터가 들어오면 조작되어 일부 필드를 추출하고 배열에 추가할 개체를 조립합니다 items[].

getNextBatch()또한 두 가지 간단한 작업을 수행합니다. 하나는 페이지 수 또는 다운로드한 배치 수를 업데이트하고  파일 Loading next batch에서 레이블을 표시하거나 숨깁니다 App.vue.

코드를 재사용하는 방법에 유의하십시오. 페이지가 로드된 후 실행되는 메서드 getNextBatch()에서도 사용 하지만 아직 구성 요소가 표시되지 않습니다. 이 호출의 효과는 구성 요소 에서 시각화할 일부 데이터로 배열을 beforeMount()채우는 것입니다 .items[]masonry

결론

이 기사에서는 Vue로 작성된 웹 페이지에서 무한 스크롤을 구현하기 위한 간단한 솔루션을 살펴보았습니다.

다른 프로젝트에서 쉽게 재사용할 수 있도록 전용 <div>. 무한 스크롤의 다른 두 부분은 새로운 데이터 배치를 다운로드하는 기능과 이 기능을 호출하는 기능을 포함하여 코드에서 잘 분리되어 있습니다. 이는 개발자가 함수에서 API의 URL을 getNextBatch()더 유용한 것으로 대체하는 데 도움이 됩니다.

특히 Vue3는 이 예제와 같이 작은 개념 증명을 작성하는 데 매우 효과적입니다. 그러나 더 복잡한 기능을 얻기 위해 구성 요소를 결합하여 확장할 수도 있습니다. 이 기사를 즐겼기를 바랍니다.

출처: https://blog.logrocket.com

#vue #vuejs 

1.00 GEEK