实现一个Vue无限加载插件
概述
前端开发中,有很多通用的组件。上拉无限加载就是其中一个。无限加载常用在长列表上,相比于传统的分页方式,无限加载更智能,体验更胜一筹。当然,开发复杂性上,也更高一点。网上已经有很多对应的插件了,这里,说下无限加载的原理,并实践开发一个对应的Vue组件。
基础知识
无限加载是这样工作的,用户浏览列表,滚动到容器的底部时,自动触发自定义的事件,请求新的数据。然后,插入到页面之中,不断的如此循环。
根据上面的简单说明,这里,关键点就在于怎么判断到达底部?有这么一个公式
滚动的高度 + 容器的高度 == 整个内容的高度
根据这个,我们就可以判断出,当前滚动到底了。下面,实际开发一个例子。
一个滚动例子
无限加载有两个场景,一种是,滚动的元素是DOM的某一个容器;另一种是,滚动的是整个页面。这两者,在获取上面提到的距离,有一定的差异性。
简单说明下,其中用到的三个高度值,具体指的是啥子高度
简要说明
ele.scrollHeight
文档的整个高度ele.scrollTop,window.scrollY
文档滚动的高度ele.offsetHeight,window.innerHeight
容器的高度,包含border,scrollBarele.clientHeight
不包含border,scrollBar的容器高度
Vue插件
实现一个无限加载的插件,需要暴露给外界的接口是,滚动的元素,当前状态,滚动到底的事件处理。很简单。 代码看这里
··· 完 ···
版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0许可协议,转载请注明出处。