-
在移动端开发中经常会遇到渲染列表数据的业务,而首屏通常容纳不了列表的数据视图,所以要用到类似分页概念的数据加载机制。在人机交互的领域中,滑动加载数据对于用户是一个不错的交互体验,故通过滑动事件来触发数据加载是一个不错的选择。
-
通过查阅资料,DOM中与滑动有关的属性有很多,这里真正要用到的有三个,如下所示:
clientHeight:手机屏幕的高度
scrollHeight:DOM内容的高度
scrollTop:垂直滚动条距离顶部的距离,随着向上滑动而增加
规律:clientHeight + scrollTop <= scrollHeight -
具体实现如下:
//手机屏幕的高度
let clientHeight = document.body.clientHeight;
//DOM内容的高度
let scrollHeight = document.body.scrollHeight;
//垂直滚动条距离顶部的距离,随着向上滑动而增加
let scrollTop = document.body.scrollTop;
//提前加载的滑动距离(为什么要提前加载?因为网络请求存在延迟,如果不提前一会请求网络,可能给用户带来不好的交互体验。)
let proLoadDis = 30;
if ((scrollTop + clientHeight) >= (scrollHeight - proLoadDis)) {
//发起请求
console.log(scrollTop + ':' + clientHeight + ':' + scrollHeight)
}