이 단계별 가이드에서 Vue.js로 무한 스크롤을 구현하는 방법을 알아보세요. 무한 스크롤을 사용하면 사용자가 콘텐츠를 스크롤하고 참여하도록 유지할 수 있습니다.
무한 스크롤을 사용하면 사용자가 페이지를 아래로 스크롤할 때 웹 페이지에 새 콘텐츠가 로드되므로 사용자가 새 페이지를 클릭하거나 페이지를 새로 고치지 않고도 새 콘텐츠를 볼 수 있습니다. 이 기능은 많은 양의 데이터나 이미지를 한 번에 로드하는 것보다 사용자가 필요로 할 때마다 로드하려는 경우에 특히 유용합니다.
수년에 걸쳐 Twitter, Facebook 및 Instagram과 같은 소셜 네트워킹 사이트는 무한 스크롤을 대중화했습니다. 이 자습서에서는 사용자 인터페이스 및 단일 페이지 애플리케이션을 빌드하기 위한 JavaScript 프레임워크인 Vue를 사용하여 무한 스크롤을 구현합니다. 시작하자!
Vue는 가상 DOM이 있는 경량 프레임워크입니다. 데이터를 선언적으로 DOM에 렌더링하는 방법을 제공하고 양방향 데이터 바인딩을 사용하여 데이터가 변경될 때 DOM을 최신 상태로 유지합니다.
Vue 3에 대해 정말 감사하게 생각하는 것은 코드의 간결함입니다. 스크립트, HTML 및 스타일을 포함한 모든 것이 단일 파일 내에 자체 위치를 가지고 있습니다. 이 솔루션은 우리 프로젝트와 같은 가장 간단한 프로젝트에 이상적이며 아이디어를 만지작거리기 시작하는 데 탁월한 선택입니다.
우리 애플리케이션에서는 다른 프로젝트에서 유용하게 사용할 수 있는 몇 가지 기능을 구현할 것입니다. 무작위 온라인 데이터 생성기에서 데이터를 다운로드합니다. 이 프로젝트 에서는 유용한 API와 현실적인 데이터를 제공하는 http://random-data-api.com 을 사용하여 실제 시나리오에서 응용 프로그램이 어떻게 작동하는지 확인할 수 있습니다.
각각의 새 데이터 배치에 대해 새 데이터가 브라우저에 다운로드되는 동안 짧은 메시지가 나타납니다. 이는 특히 API가 임의로 느리게 응답할 수 있는 정도를 고려할 때 항상 좋은 방법입니다. 따라서 사용자는 후드 아래에서 어떤 일이 일어나고 있다는 사실을 알게 됩니다.
데이터를 표시하는 그리드의 경우 석조 CSS 레이아웃을 사용합니다. 이 프로젝트에서 우리는 내가 찾을 수 있었던 가장 간단한 CSS 레이아웃 중 하나를 사용할 것입니다. 너무 많은 재작업 없이 다른 프레임워크에 맞게 쉽게 조정할 수 있습니다.
아래 이미지는 최종 결과를 보여줍니다.
프로젝트 아이디어는 매우 간단합니다. 페이지의 첫인상에서 첫 번째 데이터 배치가 브라우저에 다운로드되어 시각화됩니다. 사용자가 데이터를 시각화하는 구성 요소를 스크롤할 때 페이지 하단을 부딪히면 새로운 데이터 배치가 로드됩니다. 현재 시각화가 끝나면 새 데이터가 UI로 푸시되고 이를 수용할 수 있는 새 공간이 제공됩니다.
따라 하려면 GitHub 에서 이 프로젝트에 대한 전체 코드 리포지토리를 찾을 수 있습니다 . 다음 섹션에서는 코드의 가장 흥미로운 부분에 대해 자세히 설명합니다.
우리의 목표는 사용자가 "무한" 데이터를 포함하는 구성 요소의 맨 아래에 도달했을 때를 감지하는 것입니다. 소스 코드에서 이 구성 요소는masonry . 다음 세 가지 속성을 조작하여 이를 수행할 수 있습니다.
다음 코드는 이 아이디어를 구현합니다.
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목록의 끝으로 스크롤한 것이며 또 다른 항목 배치가 필요합니다.
아래 이미지에서 콘텐츠의 끝으로 스크롤할 때 값이 어떻게 변경되는지 확인할 수 있습니다.
목록 맨 아래에 도달했는지 확인하는 메커니즘을 지우고 나면 코드에서 이 확인을 추가할 좋은 위치를 찾아야 합니다. 자연스러운 장소는 scroll이벤트입니다. 따라서 앞뒤로 스크롤할 때마다 masonry구성 요소는 목록 맨 아래에 도달할지 여부를 제어할 수 있습니다.
mounted()주목할 가치가 있는 또 다른 사항 은 Vue가 제공하는 메서드 에서 스크롤 이벤트에 대한 리스너를 할당하여 구성 요소가 마운트된 후 코드를 실행할 수 있다는 것입니다 .
스크롤에 대해 더 논의하기 전에 애플리케이션이 처리할 데이터를 살펴보겠습니다.
data() {
return {
loading: false,
items: [],
page_count: 0,
sizes: ["tall", "taller", "tallest"]
};
},
에는 data()구성 요소의 상태가 있습니다. 자세히 살펴보겠습니다.
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;response_type=json").then((response) =&gt; {
response.data.map((x) =&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는 이 예제와 같이 작은 개념 증명을 작성하는 데 매우 효과적입니다. 그러나 더 복잡한 기능을 얻기 위해 구성 요소를 결합하여 확장할 수도 있습니다. 이 기사를 즐겼기를 바랍니다.
#vue #vuejs