怎么实现一个vue无限加载指令理

今天小编给大家分享一下怎么实现一个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钩子,注册滚动监听。

钩子函数就是一些生命周期改变时会调用的函数。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;
}

以上就是“怎么实现一个vue无限加载指令理”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


本文标题:怎么实现一个vue无限加载指令理
本文URL:http://scyanting.com/article/jsejij.html

其他资讯