How to make the requirement of unlimited loading of data at the bottom of the sliding page-JS Tutorial-php.cn

This time I will bring you how to make the requirement of unlimited loading of data at the bottom of the scrolling page, and what are the precautions for how to infinitely load data at the bottom of the scrolling page. The following is a practical case, let's take a look.

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 Deepen the 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 article

Technology of this article Key points

Vue life cycle
axios simple usage
moment.js format Change date
Lazy loading of pictures
Combined with native js to write scroll event
Request section Flow

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 and it is correct, we Let’s start modifying the code. Let’s first look at obtaining user data.

Copy after login

The original author also specifically reminds us that it is completely unnecessary and not recommended to request 5 times when loading the page. However, this interface can only return 1 at a time. This is only done for testing. Of course, I can also simulate the data through Mock, so I won’t go into details~

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

Copy after login

In this way, the page can display the personal information of 5 people.

Processing infinite scroll loading logic

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

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. Start loading data and intercept the flow.

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

Summary

Scroll The function of infinite loading to the bottom of the page is implemented on Vue and is similar to ordinary page development. Each time the scrolling load is not completed, the next request will not be triggered. Each request is pushed into the array, through's data binding implements lazy loading (actually 0 0 I don't really agree with it...). After reading it, it feels quite simple.

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