js实现下拉加载更多
实现下拉加载更多的步骤
监听滚动事件
通过监听窗口的滚动事件，判断用户是否滚动到页面底部。当滚动到接近底部时触发加载更多数据的函数。
window.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
if (scrollTop + windowHeight >= documentHeight - 100) {
loadMoreData();
}
});加载数据函数
定义一个异步函数用于加载更多数据，通常是从后端API获取数据。在获取数据后将其渲染到页面中。
async function loadMoreData() {
if (isLoading) return; // 防止重复加载
isLoading = true;
try {
const response = await fetch('your-api-endpoint?page=' + currentPage);
const newData = await response.json();
if (newData.length > 0) {
renderData(newData);
currentPage++;
}
} catch (error) {
console.error('Error loading data:', error);
} finally {
isLoading = false;
}
}渲染数据
将新加载的数据动态添加到页面中。可以根据实际需求调整渲染逻辑。
function renderData(data) {
const container = document.getElementById('data-container');
data.forEach(item => {
const element = document.createElement('div');
element.textContent = item.title; // 根据数据结构调整
container.appendChild(element);
});
}初始化和状态管理
设置必要的初始状态变量，例如当前页码和加载状态。
let currentPage = 1;
let isLoading = false;
// 初始加载第一页数据
loadMoreData();优化和注意事项
节流处理
滚动事件可能频繁触发，可以通过节流（throttle）或防抖（debounce）优化性能。
function throttle(func, delay) {
let lastCall = 0;
return function() {
const now = new Date().getTime();
if (now - lastCall >= delay) {
func();
lastCall = now;
}
};
}
window.addEventListener('scroll', throttle(function() {
// 滚动判断逻辑
}, 200));加载状态提示
在加载数据时显示加载提示（如“加载中...”），提升用户体验。
function loadMoreData() {
if (isLoading) return;
isLoading = true;
showLoadingIndicator();
// 加载数据逻辑
// ...
hideLoadingIndicator();
isLoading = false;
}无更多数据处理
当后端返回空数据时，可以显示“没有更多数据”的提示，并停止后续加载请求。
if (newData.length === 0) {
showNoMoreData();
window.removeEventListener('scroll', scrollHandler);
}
