当前位置：首页 > JavaScript

js实现更多

2026-01-31 21:33:33JavaScript

实现“更多”功能的 JavaScript 方法

监听滚动事件动态加载内容
通过监听页面滚动事件，当用户滚动到接近底部时触发加载更多内容。使用 window.innerHeight 和 document.documentElement.scrollTop 计算滚动位置，结合 setTimeout 避免频繁触发。

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.document.documentElement.scrollTop >= document.documentElement.offsetHeight - 200) {
    loadMoreContent();
  }
});

function loadMoreContent() {
  // 异步请求数据并追加到页面
  fetch('/api/more-data')
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('content-container');
      data.forEach(item => {
        container.innerHTML += `<div class="item">${item.content}</div>`;
      });
    });
}

按钮点击触发加载
添加“加载更多”按钮，用户点击时通过事件监听器加载额外内容。适合需要明确用户意图的场景。

js实现更多

document.getElementById('load-more-btn').addEventListener('click', function() {
  fetch('/api/more-data')
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('content-container');
      data.forEach(item => {
        container.appendChild(createItemElement(item));
      });
    });
});

function createItemElement(item) {
  const div = document.createElement('div');
  div.className = 'item';
  div.textContent = item.content;
  return div;
}

Intersection Observer API 实现懒加载
现代浏览器支持的更高效方法，观察目标元素与视口的交叉状态。适合无限滚动或图片懒加载场景。

js实现更多

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreContent();
  }
}, { threshold: 0.1 });

observer.observe(document.getElementById('load-more-trigger'));

function loadMoreContent() {
  // 数据加载逻辑同上
}

分页参数管理
需要跟踪当前页码或游标，确保每次请求获取新数据而非重复内容。

let currentPage = 1;

function loadMoreContent() {
  fetch(`/api/more-data?page=${currentPage}`)
    .then(response => response.json())
    .then(data => {
      if (data.length === 0) {
        document.getElementById('load-more-btn').disabled = true;
        return;
      }
      currentPage++;
      // 追加内容到容器
    });
}

性能优化注意事项

使用 documentFragment 减少重绘次数
添加加载状态提示避免重复请求
移动端注意滚动节流（可使用 requestAnimationFrame）
服务端应实现分页查询，避免一次性返回大量数据

let isLoading = false;

function loadMoreContent() {
  if (isLoading) return;
  isLoading = true;
  showLoadingIndicator();

  fetch('/api/more-data')
    .then(/* ... */)
    .finally(() => {
      isLoading = false;
      hideLoadingIndicator();
    });
}