Svelte中each循环实现分页加载的优化方案咨询

核心思路：维护渲染子集而非中断遍历 #

不需要在each块里做中断操作，核心是通过响应式变量控制当前要渲染的数据片段，让Svelte只处理当前页的DOM元素，避免一次性渲染上千条数据导致的性能问题。

传统分页实现步骤 #

1. 定义基础分页状态

<script>
  let rawData = []; // 从数据库获取的原始大数组
  let currentPage = 1;
  const pageSize = 30; // 每页展示条数
</script>

2. 计算当前页的渲染数据
   利用Svelte的响应式声明，数据或分页参数变化时自动更新子集：

$: currentPageData = rawData.slice(
  (currentPage - 1) * pageSize,
  currentPage * pageSize
);

3. 模板中遍历子集

{#each currentPageData as item (item.id)}
  <!-- 你的单条数据渲染逻辑 -->
  <div class="item-card">
    <h3>{item.title}</h3>
    <p>{item.description}</p>
  </div>
{/each}

4. 添加分页控制组件

<div class="pagination">
  <button 
    disabled={currentPage === 1} 
    on:click={() => currentPage--}
  >
    上一页
  </button>
  <span>
    第 {currentPage} 页 / 共 {Math.ceil(rawData.length / pageSize)} 页
  </span>
  <button 
    disabled={currentPage >= Math.ceil(rawData.length / pageSize)} 
    on:click={() => currentPage++}
  >
    下一页
  </button>
</div>

进阶：滚动懒加载（自动加载下一页） #

如果不想用分页按钮，可实现滚动到底部自动加载：

<script>
  import { onMount } from 'svelte';
  
  let rawData = [];
  let currentPage = 1;
  const pageSize = 30;
  $: displayedData = rawData.slice(0, currentPage * pageSize);

  function handleScroll() {
    const scrollBottom = window.innerHeight + window.scrollY;
    const documentHeight = document.documentElement.scrollHeight;
    // 距离底部200px时触发加载
    if (scrollBottom >= documentHeight - 200) {
      if (currentPage * pageSize < rawData.length) {
        currentPage++;
      }
    }
  }

  onMount(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  });
</script>

{#each displayedData as item (item.id)}
  <div class="item-card">
    <h3>{item.title}</h3>
    <p>{item.description}</p>
  </div>
{/each}

{#if currentPage * pageSize < rawData.length}
  <div class="loading">加载中...</div>
{/if}

关键注意点 #

• 一定要给each块添加唯一标识（如(item.id)），避免Svelte重新渲染所有列表项，提升更新性能。
• 如果原始数据是异步获取的，配合await块处理加载状态，避免空数组报错：

{#await fetchBigData()}
  <div>加载数据中...</div>
{:then data}
  {#each currentPageData as item (item.id)}
    <!-- 渲染逻辑 -->
  {/each}
{:catch err}
  <div>加载失败：{err.message}</div>
{/await}

内容的提问来源于stack exchange，提问作者Snek