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

不言

发布时间：2018-06-29 15:55:50

2815人浏览过

来源于php中文网

原创

这篇文章主要介绍了关于实现简单的vue无限加载指令的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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

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

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

不使用框架

立即学习“前端免费学习笔记（深入）”；

首先是html：

实现滚动加载

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('加载数据')'
}

loadMore() 函数就是从接口获取到数据，组装 html，插入到原先到节点后面。

// 表示列表的序号
var index = 10;
function loadMore() {
 var content = '';
 for(var i=0; i< 10; i++) {
  content += ''+(++index)+'、hello world'  
 }
 var node = document.getElementById('news');
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
}

这样就实现了无限加载。

在 vue 中使用指令实现

为什么要用指令实现呢？好像只有指令是可以获取到底层 dom 的？而实现无限加载，是需要拿到内容高度的。

首先初始化一个项目，添加一个组件，用来显示列表。

// components/Index.vue

OK，现在开始编写指令。从传统实现中，我们了解到要注册对滚动事件对监听，同时拿到内容高度。

directives: {
 scroll: {
  bind: function (el, binding){
   window.addEventListener('scroll', ()=> {
    if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
     console.log('load data');
    }
   })
  }
 }
}

首先是在组件内注册了 scroll 指令，然后在指令第一次绑定到组件时，也就是对应着 bind钩子，注册滚动监听。

冰兔(Btoo)网店系统

系统简介：冰兔BToo网店系统采用高端技术架构，具备超强负载能力，极速数据处理能力、高效灵活、安全稳定；模板设计制作简单、灵活、多元；系统功能十分全面，商品、会员、订单管理功能异常丰富。秒杀、团购、优惠、现金、卡券、打折等促销模式十分全面；更为人性化的商品订单管理，融合了多种控制和独特地管理机制；两大模块无限级别的会员管理系统结合积分机制、实现有效的推广获得更多的盈利！本次更新说明：1. 增加了新

下载

钩子函数就是一些生命周期改变时会调用的函数。bind 在第一次绑定到组件时调用、unbind 在指令与组件解绑时调用。

还可以注意到 bind 对应到函数有两个参数，el 和 binding，这是钩子函数参数，比如 el 对应绑定的节点，binding 有很多数据，比如传给指令的参数等。

下面的el.clientHeight就是表示获取绑定指令的这个节点的内容高度。

和之前一样，判断滚动的高度加上窗口高度是否大于内容高度。

绑定指令到节点上：

可以看到给指令传了一个值，这个值就是加载数据的函数：

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

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 += ''+(++index)+'、hello world'  
 }
 var node = document.getElementById('news');
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
 // 插入数据完成后  
 scrollDisable = false;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关专题

php文件怎么打开

打开php文件步骤：1、选择文本编辑器；2、在选择的文本编辑器中，创建一个新的文件，并将其保存为.php文件；3、在创建的PHP文件中，编写PHP代码；4、要在本地计算机上运行PHP文件，需要设置一个服务器环境；5、安装服务器环境后，需要将PHP文件放入服务器目录中；6、一旦将PHP文件放入服务器目录中，就可以通过浏览器来运行它。

1923

2023.09.01