1.编写并封装渲染网页的方法
首先定义页码index=1(默认从1开始)
然后定义一页中显示的数据条数pageSize=8(一页中显示八条数据)
var index = 1;
var pageSize = 8;
function render() { //封装渲染的方法
var str = "";
var arr = list.slice(pageSize * (index - 1), pageSize * index); //一次渲染八条数据
for (var i = 0; i <= arr.length - 1; i++) {
//把要渲染的数据加入到ul中
str = `<li>
<img src="${arr[i].pic}" alt="">
<p>
${arr[i].name}
</p>
<p>
${arr[i].price}
</p>
</li>`;
oUl.innerHTML = oUl.innerHTML+ str;
}
}function render() { //封装渲染的方法
var str = "";
var arr = list.slice(pageSize * (index - 1), pageSize * index); //一次渲染八条数据
for (var i = 0; i <= arr.length - 1; i++) {
//把要渲染的数据加入到ul中
str = `<li>
<img src="${arr[i].pic}" alt="">
<p>
${arr[i].name}
</p>
<p>
${arr[i].price}
</p>
</li>`;
oUl.innerHTML = oUl.innerHTML+ str;
}
}
在使用这个函数之前要先获取展示数据的区域oUl
var oUl = document.querySelector("ul");
至此,渲染数据的部分完成,数据来源为:该数据实质为装有对象的数组
2.1要想识别是否滚动到底部,需要获取一下四条数据
1.滚动条滚出的长度:document.documentElement.scrollTop
2.可视窗口的高度:window.innerHeight
3.展示区域的上偏移量:展示区域.offsetTop
4.展示区域的高:展示区域对象.offsetHeight
实现代码为:
//获取浏览器的视窗高
var windowH = window.innerHeight;
//获取显示区域的高度
var oMain = document.querySelector("main");
var oMainHeight = oMain.offsetHeight;
//获取显示区域的偏移量
var oMainTop = oMain.offsetTop;
var flag = false;
// 当滚动条滚动时:
window.onscroll = function () {
//获取滚动条滚出去的长度
var top = document.documentElement.scrollTop;
if (flag) {
return;
}
if (windowH + top >= oMainHeight + oMainTop) {
flag = true;
index++;
setTimeout(function () {
render();
flag=false;
}, 2000)
}
}