Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to achieve a vue unlimited loading instruction related knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

The first is html:

Implement scrolling loading * {- 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 } 1 、 hello world 2 、 hello world 3 、 hello world 4 、 hello world 5 、 hello world 6 、 hello world 7 、 hello world 8 、 hello world 9 、 hello world 10 、 hello world

Open the browser and adjust the height of the browser window so that the page can scroll.

Understand three variables first.

The distance the document.body.scrollTop scroll bar scrolls

Window.innerHeight browser window height

Document.body.clientHeight content height

Corresponding to the above principle is

Window.addEventListener ('scroll', function () {var scrollTop = document.body.scrollTop; if (scrollTop + window.innerHeight > = document.body.clientHeight) {/ / trigger loading data loadMore ();}}); function loadMore () {console.log (' load data')'}

The loadMore () function takes the data from the interface, assembles the html, and inserts it behind the node.

/ / indicates the serial number of the list: var index = 10; function loadMore () {var content ='; for (var item0; I)

< 10; i++) { content += ''+(++index)+'、hello world' } var node = document.getElementById('news'); // 向节点内插入新生成的数据 var oldContent = node[xss_clean]; node[xss_clean] = oldContent+content;} 这样就实现了无限加载。 在 vue 中使用指令实现 为什么要用指令实现呢？好像只有指令是可以获取到底层 dom 的？而实现无限加载，是需要拿到内容高度的。 首先初始化一个项目，添加一个组件，用来显示列表。 // components/Index.vue {{index}}-{{news.title}} .news__item { height: 80px; border: 1px solid #ccc; margin-bottom: 20px; } 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'} ] } } } OK，现在开始编写指令。从传统实现中，我们了解到要注册对滚动事件对监听，同时拿到内容高度。 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 the scrolling listener is registered when the instruction is first bound to the component, corresponding to the bind hook.

Hook functions are functions that are called when the life cycle changes. Bind is called the first time it is bound to a component, and unbind is called when the instruction is unbound from the component.

You can also notice that bind corresponds to the function with two parameters, el and binding, which are hook function parameters, such as the node bound by el, and binding has a lot of data, such as parameters passed to instructions, etc.

The following el.clientHeight represents the content height of the node that gets the binding instruction.

As before, determine whether the scrolling height plus the window height is greater than the content height.

Bind instructions to the node:

{{index}}-{{news.title}}

You can see that a value has been passed to the instruction, which is the function that loads the data:

Methods: {loadMore () {let newAry = []; for (let I = 0; I

< 10; i++) { newAry.push({title: 'hello world'}) } this.newslist = [...this.newslist, ...newAry]; }} 当然，现在在滚动到底部时，只会打印load data，只要把这里改成调用函数就OK了： window.addEventListener('scroll', ()=>

{if (document.body.scrollTop + window.innerHeight > = el.clientHeight) {let fnc = binding.value; fnc ();}})

The loadMore of vMurscroll = "loadMore" can be found on the binding of the hook function argument.

At this point, a simple instruction is completed.

Optimize

The above example does not really get data from the interface, so there is a hidden bug: when the response of the interface is very slow, when the data is being loaded at the bottom, a little scrolling will still trigger the data acquisition function, which will cause multiple requests to the interface at the same time, returning a large amount of data at a time.

The solution is to add a global variable scrollDisable, which is set to true when the load data function is triggered for the first time, and determines whether or not to execute the load function based on this value.

Take a common implementation as an example:

Var scrollDisable = false;window.addEventListener ('scroll', function () {var scrollTop = document.body.scrollTop; if (scrollTop + window.innerHeight > = document.body.clientHeight) {/ / trigger loading data if (! scrollDisable) {/ / loadMore ();}); / / indicates the sequence number of the list var index = 10 alternate function loadMore () {/ / start loading data, you cannot trigger this function again scrollDisable = true Var content ='; for (var iTuno; I < 10; iTunes +) {content + =''+ (+ + index) +', hello world'} var node = document.getElementById ('news'); / / insert the newly generated data var oldContent = node [XSS _ clean] into the node; node [XSS _ clean] = oldContent+content; / / scrollDisable = false after inserting the data } these are all the contents of the article "how to implement an vue Infinite loading instruction". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.