vue 一直加载_实现一个简单的 vue 无限加载指令

vue 中的自定义指令是对底层 dom 进行操作，下面以实现滚动到底部加载数据，实现无限加载来介绍如何自定义一个简单的指令。

无限加载的原理是通过对滚动事件的监听，每一次滚动都要获取到已滚动的距离，如果滚动的距离加上浏览器窗口高度，会大于等于内容高度，就触发函数加载数据。

先介绍不使用 vue 的情况如何实现无限加载。

不使用框架

首先是html：

实现滚动加载

-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

打开浏览器，调整下浏览器窗口高度，让页面可以滚动。

先了解三个变量

document.body.scrollTop 滚动条滚动的距离

window.innerHeight 浏览器窗口高度

document.body.clientHeight 内容高度

对应上面的原理就是

window.addEventListener('scroll', function() {

var scrollTop = document.body.scrollTop;

if(scrollTop + window.innerHeight >= document.body.clientHeight) {

// 触发加载数据

loadMore();

}

});

function loadMore() {

console.log('