슬라이딩 페이지 하단에 데이터 무제한 로딩 요구 사항을 만드는 방법

이번에는 스크롤 페이지 하단에 데이터를 무한 로드하는 방법을 보여드리겠습니다. 페이지 하단을 스크롤하여 무제한 데이터를 로드하는 방법에 대한 주의 사항은 무엇인가요?

Vue.js로 무한 스크롤 구현이라는 글을 봤는데 꽤 실용적이라 읽어봤는데, 혹시 필요하신 분들을 위해 간략하게 번역해봤습니다. Vue의 라이프사이클, Axios 요청 시작 시기, Vue와 함께 네이티브 JS를 사용하여 스크롤 이벤트를 작성하는 방법 등에 대한 이해를 심화할 수 있습니다. 여기서는 주로 원본 텍스트를 추출하고 보완합니다. ㅋㅋㅋ

요청 제한

ㅋㅋㅋ

http://localhost:8080을 열고 코드 수정을 시작하겠습니다. 먼저 사용자 데이터 획득을 살펴보겠습니다.

# vue init webpack-simple infinite-scroll-vuejs

원 작성자는 또한 이것이 완전히 불필요하며 요청하지 않는 것이 좋습니다. 페이지를 로드할 때 5회. 그러나 이 인터페이스는 한 번에 1개의 데이터만 반환할 수 있습니다. 이는 테스트용으로만 수행됩니다. 물론 여기서는 Mock을 사용하여 데이터를 시뮬레이션할 수도 있으므로 자세히 설명하지 않겠습니다. ~

다음으로 템플릿 구조와 스타일을 다음과 같이 작성해보겠습니다.

1. # npm install axios moment

   이렇게 하면 페이지에 5명의 개인 정보가 표시될 수 있습니다.

2. 무한 스크롤 로딩 로직 처리

다음은 스크롤을 모니터링하는 메서드에 scroll()을 추가하면 이 이벤트는 Mounted() 수명 주기 내에 있어야 합니다. 코드는 다음과 같습니다.

3. # npm run dev

   이 코드의 원본 텍스트에는 일부 철자 오류가 있으며 여기서 수정했습니다.

저장하고 브라우저로 돌아가서 효과를 확인해보세요~

4. 요약

5. 페이지 하단에 무한 로딩이 구현되는데, 이는 일반적인 페이지 개발과 유사합니다. 스크롤 로드가 완료되지 않을 때마다 다음 요청이 트리거되지 않고 데이터 바인딩이 전달됩니다. of 는 지연 로딩을 구현합니다(실제로는 0 0 동의하지 않습니다...). 읽고 나면 꽤 간단하다는 느낌이 듭니다.

읽고 나면 숙달되셨을 것입니다. 이 기사의 사례에 대해 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

6. 추천 도서:

Vue 계산 속성 및 리스너 실제 프로젝트 세부 설명

모바일 단말기에서 풀업 및 슬라이드다운 새로고침 로딩 방법

위 내용은 슬라이딩 페이지 하단에 데이터 무제한 로딩 요구 사항을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!