js 实现简单的下拉加载更多

当用户浏览到页面底部时候，自动加载下一页的内容

let allProductData = [] //全部的数据
let productData = [] //要渲染的数据
let listQuery = {
	currPage: 1,
	pageSize: 10
}

function queryData(){
    //数据处理 
productData = allProductData.slice((listQuery.currPage-1) * listQuery.pageSize, listQuery.currPage * listQuery.pageSize) 
    listQuery.currPage++;
 // 及时更新视图
    bindHTML();
}
function getAllData(){
    let xhr = new XMLHttpRequest();
    xhr.open('get', './json/', false);
    xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			allProductData = JSON.parse(xhr.responseText).RECORDS;
            // 初始化列表数据  并渲染视图
            queryData();

           }
       }
    xhr.send(null);
    
    }

window.onscroll = function() {
	// 文档内容实际高度（包括超出视窗的溢出部分）
	var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
	console.log(scrollHeight)
	//滚动条滚动距离
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	console.log(scrollTop)
	//窗口可视范围高度
	var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
	console.log(clientHeight)

	if (clientHeight + scrollTop >= scrollHeight) {
      queryData();
     }
}