Home Web Front-end JS Tutorial How to implement infinite loading of data by scrolling to the bottom of the page under Vue

How to implement infinite loading of data by scrolling to the bottom of the page under Vue

Jun 02, 2018 pm 01:59 PM
bottom scroll page

This time I will show you how to implement infinite loading of data by scrolling to the bottom of the page under Vue, and how to infinitely load data by scrolling to the bottom of the page under Vue. one time. I saw an article Implementing an Infinite Scroll with Vue.js and thought it was quite practical, so I read it and briefly translated it for reference for those who need it.

From this project you can To deepen our understanding of Vue's

life cycle

, 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

    Vue life cycle
  1. axios simple usage
  2. moment.js format date
  3. Lazy loading of pictures
  4. Combined with native js to write scroll events
  5. Request throttling

Create projectFirst 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 specifically reminded here that it is completely unnecessary and not recommended when loading the page. Requested 5 times, but this interface can only return 1 piece of data at a time, and it is only used for testing. Of course, I can also simulate data through Mock, so I won’t go into details~

Next 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 scroll 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 has some spelling errors. I have corrected it here, and also increased the distance from the bottom to start loading data and intercepting the flow.

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

Summary

The function of scrolling to the bottom of the page and infinite loading is implemented on Vue. In fact, it is similar to ordinary page development. Each time the scrolling load is not completed, the next request will not be triggered. Each request Push into the array, and implement lazy loading through

data binding

of <img :src=""> (actually 0 0, I don't really agree with it...), after reading it, it seems quite simple. .Finally, I also made a copy of this on GitHub. If you need it, you can take a look at infinite-scroll-vuejs-demo~

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

Recommended reading:

How to use JS to implement Huffman coding


How to use Angular CLI to create an Angular project

The above is the detailed content of How to implement infinite loading of data by scrolling to the bottom of the page under Vue. For more information, please follow other related articles on the PHP Chinese website!

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

Hot Article

Hot Article

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to copy a page in Word How to copy a page in Word Feb 20, 2024 am 10:09 AM

How to copy a page in Word

How to implement scrolling to a specified element position in JavaScript? How to implement scrolling to a specified element position in JavaScript? Oct 22, 2023 am 08:12 AM

How to implement scrolling to a specified element position in JavaScript?

How to deal with the problem that Laravel page cannot display CSS correctly How to deal with the problem that Laravel page cannot display CSS correctly Mar 10, 2024 am 11:33 AM

How to deal with the problem that Laravel page cannot display CSS correctly

How to customize and edit standby mode on iPhone: What's new in iOS 17 How to customize and edit standby mode on iPhone: What's new in iOS 17 Sep 21, 2023 pm 04:01 PM

How to customize and edit standby mode on iPhone: What's new in iOS 17

How to quickly refresh a web page? How to quickly refresh a web page? Feb 18, 2024 pm 01:14 PM

How to quickly refresh a web page?

How to Rearrange, Disable, and Delete iPhone Home Screen Pages How to Rearrange, Disable, and Delete iPhone Home Screen Pages Nov 29, 2023 am 08:22 AM

How to Rearrange, Disable, and Delete iPhone Home Screen Pages

How to implement page jump in 3 seconds: PHP Programming Guide How to implement page jump in 3 seconds: PHP Programming Guide Mar 25, 2024 am 10:42 AM

How to implement page jump in 3 seconds: PHP Programming Guide

Monitor iframe scrolling behavior Monitor iframe scrolling behavior Feb 18, 2024 pm 08:40 PM

Monitor iframe scrolling behavior

See all articles