h5端滚动加载下一页内容
时间: 2023-10-12 12:20:18 浏览: 51
实现滚动加载下一页内容,可以监听页面滚动事件,当滚动条滚动到底部时,触发加载下一页的操作。
一种常见的实现方式是使用`window`对象的`scroll`事件和`document`对象的`body`属性来实现。代码如下:
```javascript
let pageNum = 1; // 当前页码
const pageSize = 10; // 每页显示数量
window.addEventListener('scroll', () => {
const scrollHeight = document.body.scrollHeight; // 获取文档高度
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条位置
const clientHeight = document.documentElement.clientHeight; // 获取窗口高度
if (scrollTop + clientHeight >= scrollHeight) {
// 到达底部,加载下一页内容
loadNextPage();
}
});
function loadNextPage() {
// 发送请求获取下一页数据,这里使用 Ajax 示例
const xhr = new XMLHttpRequest();
xhr.open('GET', `/api/data?pageNum=${pageNum}&pageSize=${pageSize}`);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
renderData(data); // 渲染数据
pageNum++; // 页码加一
}
};
xhr.send();
}
```
在上述代码中,监听了`window`对象的`scroll`事件,当滚动条滚动到底部时,调用`loadNextPage`函数,发送请求获取下一页数据,并渲染到页面上。同时,`pageNum`表示当前页码,每次加载完一页数据后,`pageNum`增加1,即加载下一页。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)