当前位置：首页 > JavaScript

js实现翻页效果

2026-03-01 09:50:41JavaScript

使用JavaScript实现翻页效果

翻页效果可以通过监听滚动事件或点击按钮触发，动态加载内容或跳转页面。以下是几种常见的实现方式：

监听滚动事件实现无限滚动

window.addEventListener('scroll', function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMoreContent();
  }
});

function loadMoreContent() {
  // 模拟异步加载数据
  fetch('your-api-endpoint')
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('content-container');
      data.forEach(item => {
        const element = document.createElement('div');
        element.textContent = item.content;
        container.appendChild(element);
      });
    });
}

点击按钮翻页

<div id="content-container"></div>
<button id="prev-page">上一页</button>
<button id="next-page">下一页</button>

let currentPage = 1;
const contentContainer = document.getElementById('content-container');
const prevBtn = document.getElementById('prev-page');
const nextBtn = document.getElementById('next-page');

function loadPage(page) {
  fetch(`your-api-endpoint?page=${page}`)
    .then(response => response.json())
    .then(data => {
      contentContainer.innerHTML = '';
      data.forEach(item => {
        const element = document.createElement('div');
        element.textContent = item.content;
        contentContainer.appendChild(element);
      });
    });
}

prevBtn.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    loadPage(currentPage);
  }
});

nextBtn.addEventListener('click', () => {
  currentPage++;
  loadPage(currentPage);
});

// 初始化加载第一页
loadPage(currentPage);

使用Intersection Observer实现懒加载

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreContent();
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 1.0 });

const sentinel = document.createElement('div');
document.body.appendChild(sentinel);
observer.observe(sentinel);

function loadMoreContent() {
  // 加载内容的逻辑
  // 加载完成后重新创建新的sentinel并观察
  const newSentinel = document.createElement('div');
  document.body.appendChild(newSentinel);
  observer.observe(newSentinel);
}

分页器组件实现

js实现翻页效果

<div id="pagination">
  <span class="page-number" data-page="1">1</span>
  <span class="page-number" data-page="2">2</span>
  <span class="page-number" data-page="3">3</span>
</div>

const pageNumbers = document.querySelectorAll('.page-number');
pageNumbers.forEach(button => {
  button.addEventListener('click', (e) => {
    const page = e.target.dataset.page;
    loadPage(page);

    // 更新活动页样式
    pageNumbers.forEach(btn => btn.classList.remove('active'));
    e.target.classList.add('active');
  });
});

function loadPage(page) {
  // 根据页码加载内容
}