实现一个简单的vue无限加载指令方法

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();
 }
})

v-scroll=”loadMore”的 loadMore可以在钩子函数参数的 binding 上拿到。

至此，一个简单的指令就完成了。

优化

上面的例子并没有真正从接口获取数据，所以存在一个隐藏的 bug：当接口响应很慢的情况，滚动到底部正在加载数据时，稍微滚动一下仍会触发获取数据函数，这会造成同时请求多次接口，一次性返回大量数据。

解决办法是添加一个全局变量 scrollDisable，当第一次触发加载数据函数时，将该值设置为 true，根据该值判断是否要执行加载函数。

以普通实现为例：

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;
}