当我们页面数据量过多时我们常常会用到滚动加载,那除了插件以外我们怎么实现滚动加载呢?
首先我们先考虑滚动加载都需要哪些变量来做比较:
1.文档内容实际高度:
document.documentElement.scrollHeight,document.body.scrollHeight
2.滚动条滚动距离:
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
3.窗口可视高度:
document.documentElement.clientHeight,document.body,clientHeight
那么我们需要在window.onscroll滚动事件中来进行逻辑处理
window.onscroll = function(){
//文档内容实际高度(包括超出视窗的溢出部分)
var scrollHeight = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)
//滚动条滚动距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//窗口可视范围高度
var clientHeight = window.innerHeight || Math.max(document.documentElement.clientHeight,document.body,clientHeight)
if(clientHeight + scrollTop >= scrollHeight){
console.log("滚动加载开始")
//判断当前数据是否已经加载结束
//此时我是先实例化了一个Vue对象vm
if(vm.show3 != true){//show3是来控制“没有更过数据”的dom节点的显示与隐藏
//show2是用来控制“正在加载...”的dom节点的显示与隐藏
vm.show2 = true
//调用数据列表接口实现数据加载
vm.loadList()
}
}
}
然后通过在loadList()里做数据处理之后,滚动加载效果就完成了。