概述

前端开发中,有很多通用的组件。上拉无限加载就是其中一个。无限加载常用在长列表上,相比于传统的分页方式,无限加载更智能,体验更胜一筹。当然,开发复杂性上,也更高一点。网上已经有很多对应的插件了,这里,说下无限加载的原理,并实践开发一个对应的Vue组件。

基础知识

无限加载是这样工作的,用户浏览列表,滚动到容器的底部时,自动触发自定义的事件,请求新的数据。然后,插入到页面之中,不断的如此循环。

根据上面的简单说明,这里,关键点就在于怎么判断到达底部?有这么一个公式

滚动的高度 + 容器的高度 == 整个内容的高度

根据这个,我们就可以判断出,当前滚动到底了。下面,实际开发一个例子。

一个滚动例子

无限加载有两个场景,一种是,滚动的元素是DOM的某一个容器;另一种是,滚动的是整个页面。这两者,在获取上面提到的距离,有一定的差异性。

简单说明下,其中用到的三个高度值,具体指的是啥子高度

图片

简要说明

  • ele.scrollHeight 文档的整个高度
  • ele.scrollTop,window.scrollY 文档滚动的高度
  • ele.offsetHeight,window.innerHeight 容器的高度,包含border,scrollBar
  • ele.clientHeight 不包含border,scrollBar的容器高度

Vue插件

实现一个无限加载的插件,需要暴露给外界的接口是,滚动的元素,当前状态,滚动到底的事件处理。很简单。   代码看这里