面试题：Svelte中如何初步实现虚拟化列表以提升长列表渲染效率

Question

在Svelte项目中，假设你有一个包含大量数据项的数组需要渲染成列表。请描述实现虚拟化列表的基本步骤和关键代码逻辑，包括如何确定可见项范围以及如何绑定数据到视图。

Answer 1

1. 确定可见项范围：

   • 首先需要获取列表容器的高度和每个列表项的高度。假设列表容器高度为containerHeight，每个列表项高度为itemHeight。
   • 监听滚动事件，获取当前滚动位置scrollTop。
   • 计算起始索引startIndex：startIndex = Math.floor(scrollTop / itemHeight)。
   • 计算结束索引endIndex：endIndex = startIndex + Math.ceil(containerHeight / itemHeight)。

2. 关键代码逻辑（以Svelte为例）：

   • HTML部分：

<div class="list-container" bind:scrollTop={scrollTop}>
  {#each visibleItems as item, index}
    <div class="list-item">{item}</div>
  {/each}
</div>

• JavaScript部分：

let data = []; // 大量数据项的数组
let scrollTop = 0;
let itemHeight = 50; // 假设每个列表项高度为50px
const containerHeight = 400; // 假设列表容器高度为400px

$: startIndex = Math.floor(scrollTop / itemHeight);
$: endIndex = startIndex + Math.ceil(containerHeight / itemHeight);
$: visibleItems = data.slice(startIndex, endIndex);

• CSS部分：

.list-container {
  height: 400px;
  overflow-y: scroll;
}
.list-item {
  height: 50px;
}

3. 绑定数据到视图：
   • 通过{#each}指令在Svelte中循环渲染visibleItems数组。如上述HTML部分代码，在{#each visibleItems as item, index}块中，item就是当前可见项的数据，可将其绑定到相应的视图元素，如<div class="list-item">{item}</div>，这里简单将item的内容显示在<div>中，实际应用中可根据数据结构进行更复杂的视图绑定。