How to implement simple vue infinite loading instructions
This article mainly introduces the method of implementing simple vue infinite loading instructions. It has certain reference value. Now I share it with you. Friends in need can refer to the custom instructions in
vue. It operates on the underlying DOM. Let's introduce how to customize a simple instruction by scrolling to the bottom to load data and achieving infinite loading.
The principle of infinite loading is to monitor the scrolling event. Each time you scroll, you must obtain the scrolled distance. If the scrolling distance plus the browser window height is greater than or equal to the content height, the function will be triggered. Download Data.
First introduce how to achieve infinite loading without using vue.
Do not use frames
The first is html:
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<title>实现滚动加载</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li, ul {
list-style: none;
}
.container {
width: 980px;
margin: 0 auto;
}
.news__item {
height: 80px;
margin-bottom: 20px;
border: 1px solid #eee;
}</style>
</head>
<body>
<p class="container">
<ul class="news" id="news">
<li class="news__item">1、hello world</li>
<li class="news__item">2、hello world</li>
<li class="news__item">3、hello world</li>
<li class="news__item">4、hello world</li>
<li class="news__item">5、hello world</li>
<li class="news__item">6、hello world</li>
<li class="news__item">7、hello world</li>
<li class="news__item">8、hello world</li>
<li class="news__item">9、hello world</li>
<li class="news__item">10、hello world</li>
</ul>
</p>
</body>
</html>Open the browser and adjust the browser window Height to make the page scrollable.
First understand the three variables
document.body.scrollTop The distance the scroll bar scrolls
window. innerHeight browser window height
document.body.clientHeight content height
corresponds to the above principle is
window.addEventListener('scroll', function() {
var scrollTop = document.body.scrollTop;
if(scrollTop + window.innerHeight >= document.body.clientHeight) {
// 触发加载数据
loadMore();
}
});
function loadMore() {
console.log('加载数据')'
}loadMore() function is to get the data from the interface, assemble the html, and insert it behind the original node.
// 表示列表的序号
var index = 10;
function loadMore() {
var content = '';
for(var i=0; i< 10; i++) {
content += '<li class="news__item">'+(++index)+'、hello world</li>'
}
var node = document.getElementById('news');
// 向节点内插入新生成的数据
var oldContent = node.innerHTML;
node.innerHTML = oldContent+content;
}This achieves infinite loading.
Use instructions to implement in vue
Why do we need to use instructions to implement it? It seems that only instructions can get the underlying DOM? To achieve infinite loading, you need to obtain the content height.
First initialize a project and add a component to display the list.
// components/Index.vue
<template>
<p>
<ul class="news">
<li class="news__item" v-for="(news, index) in newslist">
{{index}}-{{news.title}}
</li>
</ul>
</p>
</template>
<style>
.news__item {
height: 80px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
</style>
<script>
export default{
data(){
return{
newslist: [
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'},
{title: 'hello world'}
]
}
}
}
</script>OK, now start writing instructions. From the traditional implementation, we learned that we need to register to listen for scroll events and get the content height at the same time.
directives: {
scroll: {
bind: function (el, binding){
window.addEventListener('scroll', ()=> {
if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
console.log('load data');
}
})
}
}
}First, the scroll instruction is registered in the component, and then when the instruction is bound to the component for the first time, that is, corresponding to the bind hook, the scroll is registered monitor.
Hook functions are functions that are called when some life cycles change. bind is called when it is bound to the component for the first time, and unbind is called when the instruction is unbound from the component.
You can also notice that bind corresponds to two parameters of the function, el and binding. These are hook function parameters. For example, el corresponds to the bound node. Binding has a lot of data, such as the ones passed to the instructions. Parameters etc.
The el.clientHeight below represents the content height of the node that obtains the binding instruction.
As before, determine whether the scroll height plus the window height is greater than the content height.
Bind the command to the node:
<template>
<p v-scroll="loadMore">
<ul class="news">
<li class="news__item" v-for="(news, index) in newslist">
{{index}}-{{news.title}}
</li>
</ul>
</p>
</template>You can see that a value is passed to the command, which is the function to load data:
methods: {
loadMore() {
let newAry = [];
for(let i = 0; i < 10; i++) {
newAry.push({title: 'hello world'})
}
this.newslist = [...this.newslist, ...newAry];
}
}Of course, now when scrolling to the bottom, only load data will be printed. Just change this to call a function and it will be OK:
window.addEventListener('scroll', ()=> {
if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
let fnc = binding.value;
fnc();
}
})The loadMore of v-scroll="loadMore" can be obtained from the binding of the hook function parameter.
At this point, a simple command is completed.
Optimization
The above example does not actually obtain data from the interface, so there is a hidden bug: when the interface response is very slow, scroll to the end When the data is being loaded, a slight scrolling will still trigger the data acquisition function, which will cause multiple interface requests at the same time and return a large amount of data at once.
The solution is to add a global variable scrollDisable. When the loading data function is triggered for the first time, set the value to true, and use this value to determine whether to execute the loading function.
Take ordinary implementation as an example:
var scrollDisable = false;
window.addEventListener('scroll', function() {
var scrollTop = document.body.scrollTop;
if(scrollTop + window.innerHeight >= document.body.clientHeight) {
// 触发加载数据
if(!scrollDisable) {
//
loadMore();
}
}
});
// 表示列表的序号
var index = 10;
function loadMore() {
// 开始加载数据，就不能再次触发这个函数了
scrollDisable = true;
var content = '';
for(var i=0; i< 10; i++) {
content += '<li class="news__item">'+(++index)+'、hello world</li>'
}
var node = document.getElementById('news');
// 向节点内插入新生成的数据
var oldContent = node.innerHTML;
node.innerHTML = oldContent+content;
// 插入数据完成后
scrollDisable = false;
}The above is the entire content of this article. I hope it will be helpful to everyone’s learning. More related Please pay attention to the PHP Chinese website for content!
Related recommendations:
About the configuration introduction of using Typescript in Vue2 Vue-cli
##About the implementation of the Vue comment framework (Implementation of parent component)
The above is the detailed content of How to implement simple vue infinite loading instructions. 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 use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to add functions to buttons for vue
Apr 08, 2025 am 08:51 AM
You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.
How to use watch in vue
Apr 07, 2025 pm 11:36 PM
The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.
What does vue multi-page development mean?
Apr 07, 2025 pm 11:57 PM
Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.
How to reference js file with vue.js
Apr 07, 2025 pm 11:27 PM
There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.
How to return to previous page by vue
Apr 07, 2025 pm 11:30 PM
Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.
How to use vue traversal
Apr 07, 2025 pm 11:48 PM
There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values for each element; and the .map method can convert array elements into new arrays.
How to jump to the div of vue
Apr 08, 2025 am 09:18 AM
There are two ways to jump div elements in Vue: use Vue Router and add router-link component. Add the @click event listener and call this.$router.push() method to jump.
