实现一个简单的vue无限加载指令方法
vue中的自定义指令是对底层dom进行操作，下面以实现滚动到底部加载数据，实现无限加载来介绍如何自定义一个简单的指令。
无限加载的原理是通过对滚动事件的监听，每一次滚动都要获取到已滚动的距离，如果滚动的距离加上浏览器窗口高度，会大于等于内容高度，就触发函数加载数据。
先介绍不使用vue的情况如何实现无限加载。
不使用框架
首先是html：
<!DOCTYPEhtml><htmllang="en">
<head><metacharset="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:0auto;
}
.news__item{
height:80px;
margin-bottom:20px;
border:1pxsolid#eee;
}</style>
</head>
<body>
<divclass="container">
<ulclass="news"id="news">
<liclass="news__item">1、helloworld</li>
<liclass="news__item">2、helloworld</li>
<liclass="news__item">3、helloworld</li>
<liclass="news__item">4、helloworld</li>
<liclass="news__item">5、helloworld</li>
<liclass="news__item">6、helloworld</li>
<liclass="news__item">7、helloworld</li>
<liclass="news__item">8、helloworld</li>
<liclass="news__item">9、helloworld</li>
<liclass="news__item">10、helloworld</li>
</ul>
</div>
</body>
</html>
打开浏览器，调整下浏览器窗口高度，让页面可以滚动。
先了解三个变量
- document.body.scrollTop滚动条滚动的距离
- window.innerHeight浏览器窗口高度
- document.body.clientHeight内容高度
对应上面的原理就是
window.addEventListener('scroll',function(){
varscrollTop=document.body.scrollTop;
if(scrollTop+window.innerHeight>=document.body.clientHeight){
//触发加载数据
loadMore();
}
});
functionloadMore(){
console.log('加载数据')'
}
loadMore()函数就是从接口获取到数据，组装html，插入到原先到节点后面。
//表示列表的序号
varindex=10;
functionloadMore(){
varcontent='';
for(vari=0;i<10;i++){
content+='<liclass="news__item">'+(++index)+'、helloworld</li>'
}
varnode=document.getElementById('news');
//向节点内插入新生成的数据
varoldContent=node.innerHTML;
node.innerHTML=oldContent+content;
}
这样就实现了无限加载。
在vue中使用指令实现
为什么要用指令实现呢？好像只有指令是可以获取到底层dom的？而实现无限加载，是需要拿到内容高度的。
首先初始化一个项目，添加一个组件，用来显示列表。
//components/Index.vue
<template>
<div>
<ulclass="news">
<liclass="news__item"v-for="(news,index)innewslist">
{{index}}-{{news.title}}
</li>
</ul>
</div>
</template>
<style>
.news__item{
height:80px;
border:1pxsolid#ccc;
margin-bottom:20px;
}
</style>
<script>
exportdefault{
data(){
return{
newslist:[
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'},
{title:'helloworld'}
]
}
}
}
</script>
OK，现在开始编写指令。从传统实现中，我们了解到要注册对滚动事件对监听，同时拿到内容高度。
directives:{
scroll:{
bind:function(el,binding){
window.addEventListener('scroll',()=>{
if(document.body.scrollTop+window.innerHeight>=el.clientHeight){
console.log('loaddata');
}
})
}
}
}
首先是在组件内注册了scroll指令，然后在指令第一次绑定到组件时，也就是对应着bind钩子，注册滚动监听。
钩子函数就是一些生命周期改变时会调用的函数。bind在第一次绑定到组件时调用、unbind在指令与组件解绑时调用。
还可以注意到bind对应到函数有两个参数，el和binding，这是钩子函数参数，比如el对应绑定的节点，binding有很多数据，比如传给指令的参数等。
下面的el.clientHeight就是表示获取绑定指令的这个节点的内容高度。
和之前一样，判断滚动的高度加上窗口高度是否大于内容高度。
绑定指令到节点上：
<template>
<divv-scroll="loadMore">
<ulclass="news">
<liclass="news__item"v-for="(news,index)innewslist">
{{index}}-{{news.title}}
</li>
</ul>
</div>
</template>
可以看到给指令传了一个值，这个值就是加载数据的函数：
methods:{
loadMore(){
letnewAry=[];
for(leti=0;i<10;i++){
newAry.push({title:'helloworld'})
}
this.newslist=[...this.newslist,...newAry];
}
}
当然，现在在滚动到底部时，只会打印loaddata，只要把这里改成调用函数就OK了：
window.addEventListener('scroll',()=>{
if(document.body.scrollTop+window.innerHeight>=el.clientHeight){
letfnc=binding.value;
fnc();
}
})
v-scroll="loadMore"的loadMore可以在钩子函数参数的binding上拿到。
至此，一个简单的指令就完成了。
优化
上面的例子并没有真正从接口获取数据，所以存在一个隐藏的bug：当接口响应很慢的情况，滚动到底部正在加载数据时，稍微滚动一下仍会触发获取数据函数，这会造成同时请求多次接口，一次性返回大量数据。
解决办法是添加一个全局变量scrollDisable，当第一次触发加载数据函数时，将该值设置为true，根据该值判断是否要执行加载函数。
以普通实现为例：
varscrollDisable=false;
window.addEventListener('scroll',function(){
varscrollTop=document.body.scrollTop;
if(scrollTop+window.innerHeight>=document.body.clientHeight){
//触发加载数据
if(!scrollDisable){
//
loadMore();
}
}
});
//表示列表的序号
varindex=10;
functionloadMore(){
//开始加载数据，就不能再次触发这个函数了
scrollDisable=true;
varcontent='';
for(vari=0;i<10;i++){
content+='<liclass="news__item">'+(++index)+'、helloworld</li>'
}
varnode=document.getElementById('news');
//向节点内插入新生成的数据
varoldContent=node.innerHTML;
node.innerHTML=oldContent+content;
//插入数据完成后
scrollDisable=false;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。