집 >웹 프론트엔드 >JS 튜토리얼 >Vue는 페이지 하단으로 끌어내려 즉시 데이터를 로드합니다.

Vue는 페이지 하단으로 끌어내려 즉시 데이터를 로드합니다.

php中世界最好的语言원래의: 2018-04-27 13:41:304390검색

이번에는 Vue를 페이지 하단으로 끌어내렸을 때 데이터를 즉시 로드하는 방법에 대한 Notes를 가져오겠습니다.

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

이 기사 기술 포인트

Vue 수명주기
axios 간단한 사용법
moment.js 형식 날짜
이미지 지연 로딩
과 결합 스크롤을 작성하는 기본 js events
스로틀 요청

프로젝트 생성

먼저 간단한 vue 프로젝트를 생성하세요

# vue init webpack-simple infinite-scroll-vuejs

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

# npm install axios moment

사용자 데이터 초기화

이후 프로젝트가 빌드되면 실행해 보세요.

# npm run dev

http://localhost:8080을 올바르게 연 후 코드 수정을 시작합니다. 먼저 사용자 데이터를 가져오는 것을 살펴보겠습니다. 불필요하므로 페이지를 로드하지 않는 것이 좋습니다. 5번 요청하면 이 인터페이스는 한 번에 1개의 데이터만 반환할 수 있으며 이는 테스트에만 사용됩니다. 물론 Mock을 통해 데이터를 시뮬레이션할 수도 있습니다. 자세히 들어가 보세요~

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

<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명의 개인 정보가 표시될 수 있습니다.

무한 스크롤 로딩 로직 처리

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

<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>

이 코드의 원본 텍스트에는 일부 철자 오류가 있습니다. 여기서도 데이터 로딩을 시작하고 흐름을 가로채기 위해 거리를 늘렸습니다.

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

요약

무한 로딩 기능입니다. 페이지 하단으로 스크롤하는 것은 실제로 Vue에서 구현되며 일반적인 페이지 개발과 유사합니다. 각 스크롤 로드는 완료되지 않습니다. 각 요청은 배열로 푸시됩니다. 의

데이터 바인딩

(실제로는 0 0, 별로 동의하지 않습니다...), 읽고 나면 꽤 간단하다는 느낌이 듭니다. 이 기사의 사례를 읽은 후 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!