이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
vue-cli3.0 구성 상세 설명Angular 프로젝트 생성 단계에 대한 Angular CLI 상세 설명위 내용은 Vue는 페이지 하단으로 끌어내려 즉시 데이터를 로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!