前端一次性加載數據實現滾動分頁展示：核心邏輯與代碼實戰

適用場景

總數據量較小（< 1000 條），首屏渲染 8 條，滾動到底部逐批追加 8 條，避免頻繁請求接口。

核心邏輯

1. 接口一次性返回全量列表 allData，前端緩存至變量/狀態。
2. 維護 pageIndex（當前頁）、pageSize = 8。
3. 監聽 window.onscroll 或 IntersectionObserver 判斷到底部。
4. 切片渲染：allData.slice(pageIndex*pageSize, (pageIndex+1)*pageSize) 追加 DOM。
5. 無更多數據時提示「沒有新數據了」。

原生 JS 實現（無 jQuery 依賴）

let allData = [], pageIndex = 0, pageSize = 8;
const list = document.getElementById('list');
const loader = document.getElementById('loader');

async function fetchData() {
  const res = await fetch('/api/all-items');
  allData = await res.json();
  renderNext();
}

function renderNext() {
  const start = pageIndex * pageSize;
  const chunk = allData.slice(start, start + pageSize);
  if (!chunk.length) {
    loader.textContent = 'T_T 沒有新數據了...';
    return;
  }
  chunk.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    list.appendChild(li);
  });
  pageIndex++;
}

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

fetchData();

進階優化

• 虛擬列表：數據量大時使用 react-window / vue-virtual-scroller 只渲染可視區。
• IntersectionObserver：替代 scroll 事件，性能更優、無抖動。
• 防抖/節流：scroll 監聽加 lodash.throttle 降低觸發頻率。
• 骨架屏：追加渲染前顯示佔位動畫，提升體感。

一次性加載 + 本地分頁 = 簡單、低延遲、適合中小數據集的「偽無限滾動」方案。