Vue에서 페이지 하단으로 스크롤하여 데이터 무한 로딩을 구현하는 방법

이번에는 Vue에서 페이지 하단으로 스크롤하여 데이터 무한 로딩을 구현하는 방법을 보여드리겠습니다. 여기에서 Vue에서 페이지 하단으로 스크롤할 때 주의해야 할 노트는 무엇인가요? 실제 사례이므로 살펴보겠습니다.

Vue.js로 무한 스크롤 구현이라는 글을 봤는데 꽤 실용적이라 읽어봤는데, 혹시 필요하신 분들을 위해 간략하게 번역해봤습니다. Vue의

라이프 사이클

이해, Axios 요청 시작 시기, Vue와 함께 기본 JS를 사용하여 스크롤 이벤트 작성 방법 등에 대한 이해를 심화할 수 있습니다. 여기서는 주로 원본 텍스트의 핵심 사항을 추출하고 보완합니다

기술 이 글의 포인트

Vue lifecycle
Axios simple Usage
moment.js format date
imagelazy loading
네이티브 js와 결합하여 스크롤 이벤트 작성
요청 제한

프로젝트 만들기 먼저 간단한 vue 프로젝트를 만듭니다

# vue init webpack-simple infinite-scroll-vuejs

그런 다음 프로젝트에 필요한 일부 플러그인을 설치합니다

# npm install axios moment

사용자 데이터 초기화

프로젝트가 빌드된 후, 실행하고 살펴보세요

# npm run dev

http://localhost:8080을 엽니다. 모든 것이 올바른 후 코드 수정을 시작합니다. 먼저 사용자 데이터를 얻는 방법을 살펴보겠습니다.

<script>
import axios from 'axios'
import moment from 'moment'
export default {
 name: 'app',
 // 创建一个存放用户数据的数组
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios请求接口获取数据
  getInitialUsers() {
   for (var i = 0; i < 5; i++) {
    axios.get(`https://randomuser.me/api/`).then(response => {
     this.persons.push(response.data.results[0])
    })
   }
  },
  formatDate(date) {
   if (date) {
    return moment(String(date)).format('MM/DD/YYYY')
   }
  },
 beforeMount() {
  // 在页面挂载前就发起请求
  this.getInitialUsers()
 }
}
</script>

원저자는 또한 그것이 완전히 불필요하며 페이지를 로드할 때 5번 요청하는 것은 권장되지 않습니다. 그러나 이 인터페이스는 한 번에 1개만 반환할 수 있습니다. 물론 이는 테스트용으로만 수행되므로 Mock을 통해 데이터를 시뮬레이션할 수도 있습니다. 세부 내용으로 들어갑니다~

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

<template>
 <p id="app">
  <h1>Random User</h1>
  <p class="person" v-for="(person, index) in persons" :key="index">
   <p class="left">
    <img :src="person.picture.large" alt="">
   </p>
   <p class="right">
    <p>{{ person.name.first}} {{ person.name.last }}</p>
    <ul>
     <li>
      <strong>Birthday:</strong> {{ formatDate(person.dob)}}
     </li>
     <p class="text-capitalize">
      <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
     </p>
    </ul>
   </p>
  </p>
 </p>
</template>
<style lang="scss">
.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;
 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }
 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }
 .text-capitalize {
  text-transform: capitalize;
 }
}
</style>

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

무한 스크롤 로딩 로직 처리

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

<script>
 // ...
 methods: {
  // ...
  scroll(person) {
   let isLoading = false
   window.onscroll = () => {
    // 距离底部200px时加载一次
    let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
    if (bottomOfWindow && isLoading == false) {
     isLoading = true
     axios.get(`https://randomuser.me/api/`).then(response => {
      person.push(response.data.results[0])
      isLoading = false
     })
    }
   }
  }
 },
 mounted() {
  this.scroll(this.persons)
 }
}
</script>

이 코드의 원본 텍스트에는 맞춤법 오류가 있습니다. 또한 데이터 로딩과 흐름 차단을 시작하기 위해 아래쪽부터 거리를 늘렸습니다.

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

요약

스크롤 기능은 문제 없습니다. 페이지 하단에 있으며 Vue에서는 무한 로딩이 구현됩니다. 실제로는 일반적인 페이지 개발과 유사합니다. 스크롤 로드가 완료되지 않을 때마다 다음 요청이 트리거되지 않고 각 요청이 내부로 푸시됩니다. 배열의 경우, 지연 로딩은 의

데이터 바인딩

을 통해 구현됩니다(실제로는 0 0에 별로 동의하지 않습니다...). 읽어보니 상당히 간단합니다. 마지막으로 GitHub에서도 이 내용을 복사해두었습니다. 필요하신 경우 Infinite-scroll-vuejs-demo를 참고하세요~

이 글의 사례를 읽으신 후 방법을 익히셨으리라 믿습니다. 더 흥미로운 내용이 있으니 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 도서:

JS를 사용하여 Huffman 코딩을 구현하는 방법

Angular CLI를 사용하여 Angular 프로젝트를 만드는 방법

위 내용은 Vue에서 페이지 하단으로 스크롤하여 데이터 무한 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!