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!

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Zend Studio 13.0.1
Powerful PHP integrated development environment

Atom editor mac version download
The most popular open source editor

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Dreamweaver Mac version
Visual web development tools
