Home > Web Front-end > JS Tutorial > body text

Vue pulls down to the bottom of the page and loads the data immediately

php中世界最好的语言
Release: 2018-04-27 13:41:30
Original
4335 people have browsed it

This time I will bring you the Vue drop-down to the bottom of the page to load the data immediately, Vue drop-down to the bottom of the page to load the data immediately What are the precautions, the following is a practical case, let's take a look.

From this project, you can deepen your understanding of the life cycle of Vue, when to start axios request, how to use native js with Vue to write scroll events, etc. Here I mainly extract and supplement the key points of the original text.

Technical points of this article

  1. Vue life cycle

  2. axios simple usage

  3. moment.js formatted date

  4. Lazy loading of pictures

  5. Combined with native js to write scroll events

  6. Request throttling

Create project

First create a simple vue Project

# vue init webpack-simple infinite-scroll-vuejs
Copy after login

Then install some plug-ins needed for the project

# npm install axios moment
Copy after login

Initialize user data

After the project is built, run it and take a look

# npm run dev
Copy after login

After opening http://localhost:8080 correctly, we started to modify the code. Let’s first look at obtaining user data.

<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>
Copy after login

The original author also specially reminded here that it is completely unnecessary and not recommended. When loading the page, the request is made 5 times, but this interface can only return 1 piece of data at a time, which is only used for testing. Of course, I can also simulate data through Mock, so I won’t go into details~

Next, let’s write the template structure and style, as follows:

<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>
Copy after login

This way the page can display the personal information of 5 people.

Processing infinite scrolling loading logic

We next need to add scroll() in methods to monitor scrolling, and this event should be within the life cycle of mounted(). The code is as follows:

<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>
Copy after login

The original text of this code is There is a bit of a spelling mistake. I have corrected it here. In addition, I have increased the distance from the bottom to start loading the data and intercepting the flow.

Save it, go back to the browser, and check the effect. There is no problem~

Summary

The function of scrolling to the bottom of the page and infinite loading is implemented on Vue, which is similar to ordinary page development. Each time the scrolling load is not completed, the request will not be triggered. Once, each request is pushed into the array, and lazy loading is implemented through data binding of (actually 0 0, I don't really agree with it...), after reading Doesn’t it feel quite simple?

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

detailed explanation of vue-cli3.0 configuration

Angular CLI detailed explanation of the steps to create an Angular project

The above is the detailed content of Vue pulls down to the bottom of the page and loads the data immediately. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!