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
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
- axios simple usage
- moment.js format date
- Lazy loading of pictures
- Combined with native js to write scroll events
- Request throttling
Create projectFirst create a simple vue project
# vue init webpack-simple infinite-scroll-vuejs
Then install some plug-ins needed for the project
# npm install axios moment
After the project is built, run it and take a look
# npm run dev
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>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>This way the page can display the personal information of 5 people.
Processing infinite scroll loading logicWe 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>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~
SummaryThe 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 (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 codingHow to use Angular CLI to create an Angular projectThe 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to copy a page in Word
Feb 20, 2024 am 10:09 AM
Want to copy a page in Microsoft Word and keep the formatting intact? This is a smart idea because duplicating pages in Word can be a useful time-saving technique when you want to create multiple copies of a specific document layout or format. This guide will walk you through the step-by-step process of copying pages in Word, whether you are creating a template or copying a specific page in a document. These simple instructions are designed to help you easily recreate your page without having to start from scratch. Why copy pages in Microsoft Word? There are several reasons why copying pages in Word is very beneficial: When you have a document with a specific layout or format that you want to copy. Unlike recreating the entire page from scratch
How to implement scrolling to a specified element position in JavaScript?
Oct 22, 2023 am 08:12 AM
How to implement the function of scrolling to a specified element position in JavaScript? In a web page, when we need to focus the user's line of sight to a specific element position, we can use JavaScript to implement the function of scrolling to the specified element position. This article will introduce how to implement this function through JavaScript and provide corresponding code examples. First, we need to obtain the position information of the target element. You can use Element.getBoundingClient
How to customize and edit standby mode on iPhone: What's new in iOS 17
Sep 21, 2023 pm 04:01 PM
Standby is a new feature in the iOS 17 update that provides a new and enhanced way to access information when your phone is idle quickly. With StandBy, you can conveniently check the time, view upcoming events, browse your calendar, get weather updates for your location, and more. Once activated, the iPhone will intuitively enter standby mode when set to landscape while charging. This feature is perfect for wireless charging points like your bedside table, or when you're away from your iPhone charging during daily tasks. It allows you to swipe through various widgets displayed in standby to access different sets of information from various applications. However, you may want to modify these widgets or even delete some based on your preferences and the information you need frequently. So let's dive into
How to quickly refresh a web page?
Feb 18, 2024 pm 01:14 PM
Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W
Monitor iframe scrolling behavior
Feb 18, 2024 pm 08:40 PM
How to monitor the scrolling of an iframe requires specific code examples. When we use the iframe tag to embed other web pages in a web page, sometimes we need to perform some specific operations on the content in the iframe. One of the common needs is to listen for the scroll event of the iframe so that the corresponding code can be executed when the scroll occurs. The following will introduce how to use JavaScript to monitor the scrolling of an iframe, and provide specific code examples for reference. Get the iframe element First, we need
How to deal with the problem that Laravel page cannot display CSS correctly
Mar 10, 2024 am 11:33 AM
"Methods to handle Laravel pages that cannot display CSS correctly, need specific code examples" When using the Laravel framework to develop web applications, sometimes you will encounter the problem that the page cannot display CSS styles correctly, which may cause the page to render abnormal styles. Affect user experience. This article will introduce some methods to deal with the failure of Laravel pages to display CSS correctly, and provide specific code examples to help developers solve this common problem. 1. Check the file path. First check the path of the CSS file.
Use ThinkPHP6 to implement a beautiful 404 page
Jun 20, 2023 am 11:06 AM
As the Internet develops, many websites or applications have gradually become more complex. When users use it, they often encounter error pages, the most common of which is the 404 page. The 404 page means that the page being accessed does not exist and is a common error page. For websites or applications, a beautiful 404 page can greatly improve the user experience. In this article, we will introduce how to use ThinkPHP6 to quickly implement a beautiful 404 page. Create a route First, we need to create an err in the route folder
How to Rearrange, Disable, and Delete iPhone Home Screen Pages
Nov 29, 2023 am 08:22 AM
In iOS, Apple allows you to disable individual home screen pages on your iPhone. It's also possible to rearrange the order of home screen pages and delete pages directly instead of just disabling them. Here's how it works. How to Rearrange Home Screen Pages Touch and hold Space on the Home screen to enter jitter mode. Tap the row of dots that represent Home screen pages. In the Home screen grid that appears, touch and drag a page to rearrange it relative to other pages. Others move in response to your dragging. When you're happy with your new arrangement, tap "Done" in the upper right corner of the screen, then tap "Done" again to exit dither mode. How to Disable or Remove Home Screen Pages Touch and hold Space on the Home screen to enter dither mode. Tap to represent home screen
