js 实现简单的下拉加载更多_js切割数组实现下拉加载更多-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44523717/article/details/96978202

本文介绍了一种使用JavaScript实现的无限滚动加载技术，该技术允许网页在用户接近页面底部时自动加载更多内容，提供了平滑的用户体验。文章详细解释了如何通过监听滚动事件并计算页面滚动位置来触发内容加载，同时还展示了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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/data.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();
     }
}