js实现下拉分页
时间: 2023-08-04 07:12:20 浏览: 47
下拉分页是一种常见的页面加载方式,可以让用户在无限滚动页面的情况下获取更多的数据。下面是一个用 JavaScript 实现的简单的下拉分页示例:
HTML:
```html
<div id="list">
<ul>
<!-- 初始数据 -->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
```
JavaScript:
```javascript
var page = 1;
var isLoading = false;
function loadData() {
isLoading = true;
// 模拟异步加载数据
setTimeout(function() {
var list = document.getElementById('list').querySelector('ul');
// 模拟新加载的数据
var data = [
'<li>' + (page * 3 + 1) + '</li>',
'<li>' + (page * 3 + 2) + '</li>',
'<li>' + (page * 3 + 3) + '</li>'
];
// 添加新数据到列表
list.innerHTML += data.join('');
// 加载完成
isLoading = false;
}, 1000);
}
window.onscroll = function() {
// 获取当前滚动位置和可视窗口高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 获取页面高度
var documentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
// 如果滚动到页面底部并且没有正在加载数据,则加载新数据
if (scrollTop + windowHeight >= documentHeight && !isLoading) {
page++;
loadData();
}
};
```
在这个示例中,我们使用了一个 `page` 变量来记录当前页数,一个 `isLoading` 变量来记录当前是否正在加载数据。然后在 `loadData` 函数中模拟了异步加载数据的过程,并将新数据添加到列表中。在滚动事件中,我们获取当前滚动位置和可视窗口高度,然后判断是否滚动到了页面底部并且没有正在加载数据,如果是,则增加页数并调用 `loadData` 函数加载新数据。