这篇文章给大家分享的是有关如何实现一个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 += '
这样就实现了无限加载。
在 vue 中使用指令实现
为什么要用指令实现呢?好像只有指令是可以获取到底层 dom 的?而实现无限加载,是需要拿到内容高度的。
首先初始化一个项目,添加一个组件,用来显示列表。
// components/Index.vue
- {{index}}-{{news.title}}
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就是表示获取绑定指令的这个节点的内容高度。
和之前一样,判断滚动的高度加上窗口高度是否大于内容高度。
绑定指令到节点上:
- {{index}}-{{news.title}}
可以看到给指令传了一个值,这个值就是加载数据的函数:
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 += '
感谢各位的阅读!关于“如何实现一个vue无限加载指令”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。