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

php中世界最好的语言
풀어 주다: 2018-06-06 14:56:51
원래의
3458명이 탐색했습니다.

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

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. 무한 스크롤 로딩 로직 처리

  3. 다음은 스크롤을 모니터링하는 메서드에 scroll()을 추가하면 이 이벤트는 Mounted() 수명 주기 내에 있어야 합니다. 코드는 다음과 같습니다.
  4. # npm run dev
    로그인 후 복사

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

  5. 저장하고 브라우저로 돌아가서 효과를 확인해보세요~
  6. 요약
  7. 페이지 하단에 무한 로딩이 구현되는데, 이는 일반적인 페이지 개발과 유사합니다. 스크롤 로드가 완료되지 않을 때마다 다음 요청이 트리거되지 않고 데이터 바인딩이 전달됩니다. of 는 지연 로딩을 구현합니다(실제로는 0 0 동의하지 않습니다...). 읽고 나면 꽤 간단하다는 느낌이 듭니다.

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

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

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿