JS实现页面滑到底部加载下一页数据

事情的起因是这样的...

今天，同学在群里请教老师问题，见老师没有回复，热心肠的我就替老师回答了一下，结果

最后这个艰巨的任务就落在了我的头上。

开始

先搭建个h5页面，写几行html和css代码

 

html

复制代码

<div id="main">
    <div id="content">
        <ul id="ul">

        </ul>
    </div>
</div>

 

css

复制代码

body {
	background-color: #eee;
}
#main {
	margin: 0 auto;
	width: 600px;
}
#content {
	position: absolute;
	width: 600px;
}
#ul {
	margin: 0;
	padding: 0;
}
#ul li {
	list-style-type: none;
	background-color: #2AC2D1;
	margin: 0;
	margin-top: 30px;
	border-radius: 10px;
	text-align: center;
	height: 60px;
	color: #fff;
}

下面开始写js功能部分的代码

这位同学的需求大概就是页面滑到底部时，加载一页数据，也就是分页的功能。这个功能的要点就是判断页面什么时候到了底部，需要加载数据先写个模拟接口请求数据的方法

 

js

复制代码

// 模拟请求接口返回数据的方法
function mockApi(pagenum, pagesize) {
	return new Promise(function(resolve, reject) {
		let data = [];
		for (let i = 0; i < pagesize; i++) {
			data.push(`第${pagenum}页的数据--${i + 1}`);
		}
		resolve(data);
	})
}

请求方法返回数据之后需要将数据渲染到页面中

 

js

复制代码

// 渲染dom的方法
function render(){
	mockApi(pagenum, pagesize).then(function(res) {
	for (let item of res) {
		let dom = document.createElement("li");
		dom.innerHTML = item;
		ul.appendChild(dom);
	}
	})
}

然后设置一些初始数据，页面加载执行第一次渲染

 

js

复制代码

var pagenum = 1; // 页数
var pagesize = 20; // 每页多少条
const ul = document.getElementById("ul");
window.onload = function() {
	render(); // 页面加载完成渲染一次
}

这一步结束，可以看到是下面这样，滑到底部还是没有反应的，因为还没写功能代码

最后，也是这个功能的要点，让页面滑到底部的时候可以加载一页数据。通过window.onscroll事件监听页面的滚动，在事件监听的方法中判断如果滚动条距离顶部的距离 + 页面可视窗口的高度 > 网页总高度的时候，此时页面就到了最底部。代码如下：

 

js

复制代码

window.onscroll = function() {
	//获取网页的总高度
	var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
	//clientHeight是网页在浏览器中的可视高度
	var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
	//scrollTop是浏览器滚动条的top位置
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	//判断到底部了,为了避免一些问题，设置距离底部50px时就执行代码
        console.log(scrollTop + clientHeight, htmlHeight);
	if (scrollTop + clientHeight > htmlHeight - 50) {
		pagenum++; // 页码+1
		render();
	}
}

预览效果如下：

优化一下

通过预览的效果可以看到onscroll事件监听，执行的次数多很频繁，这样会影响性能，所以改写一下事件监听，添加一个防抖函数。

把事件监听函数提取出来：

 

js

复制代码

function scrollFn(){
	//获取网页的总高度
	var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
	//clientHeight是网页在浏览器中的可视高度
	var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
	//scrollTop是浏览器滚动条的top位置
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	//判断到底部了
	console.log(scrollTop + clientHeight  ,  htmlHeight)
	if (scrollTop + clientHeight > htmlHeight - 50) {
		pagenum++; // 页码+1
		render();
	}
}

写一个防抖函数

 

js

复制代码

function debounce(fn, delay){
	let timeout;
	return function() {
		clearTimeout(timeout);
		timeout = setTimeout(()=>{
			fn.apply(this, arguments);
		},delay)
	}
}

重新设置监听：

 

js

复制代码

window.onscroll = debounce(scrollFn, 200);