Svelte-Tiny-Virtual-List 使用指南

Svelte-Tiny-Virtual-List 使用指南

svelte-tiny-virtual-list A tiny but mighty list virtualization library for Svelte, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more! 项目地址: https://gitcode.com/gh_mirrors/sv/svelte-tiny-virtual-list

项目介绍

Svelte-Tiny-Virtual-List 是一个轻量级且功能强大的 Svelte 虚拟列表库，它不依赖任何外部库，压缩后的体积只有约5KB。该组件通过只渲染当前可视区域内的项目，极大提高了性能，即使是处理数百万条数据也游刃有余。特性包括对固定或可变尺寸的支持、垂直或水平滚动、粘性元素、滚动到指定索引以及与 svelte-infinite-loading 的良好兼容性。

项目快速启动

安装

确保你的开发环境中已经安装了 Svelte 相关的工具。接下来，可以通过以下命令将此库添加到你的项目中：

NPM/Yarn

npm install svelte-tiny-virtual-list
# 或者
yarn add svelte-tiny-virtual-list

####PNPM

npm i -g pnpm
pnpm install svelte-tiny-virtual-list

CDN（适用于直接在浏览器中使用）

<!-- UMD版 -->
<script src="https://unpkg.com/svelte-tiny-virtual-list@^1/dist/svelte-tiny-virtual-list.js"></script>
<!-- ES模块版 -->
<script type="module" src="https://unpkg.com/svelte-tiny-virtual-list@^1/dist/svelte-tiny-virtual-list.mjs"></script>

示例代码

创建一个简单的虚拟列表：

<script>
import VirtualList from 'svelte-tiny-virtual-list';
let data = ['A', 'B', 'C', 'D', 'E', ...]; // 假设这是一个长数组
</script>

<VirtualList
    width="100%"
    height={600}
    itemCount={data.length}
    itemSize={50}>
    <div slot="item" let:index let:style>
        Letter: {data[index]} - Row: {index}
    </div>
</VirtualList>

应用案例与最佳实践

当需要在有限的屏幕空间展示大量列表项时，使用 svelte-tiny-virtual-list 是非常理想的。最佳实践包括正确管理 itemSize，特别是当你需要动态调整大小时。确保在数据更新并且每个项的尺寸可能变化时调用 recomputeSizes() 方法以保持列表的准确渲染。

<script>
import { onMount } from 'svelte';
// 假定这里有数据更新逻辑...
function refreshSizes() {
    virtualList.recomputeSizes(); // 绑定实例到变量并手动重算尺寸
}
</script>

典型生态项目结合

为了实现无限滚动效果，可以与 svelte-infinite-loading 结合使用：

<script>
import VirtualList from 'svelte-tiny-virtual-list';
import InfiniteLoading from 'svelte-infinite-loading';

let data = [...]; // 初始化数据
let loadingMore = false;

async function fetchMoreData() {
    await new Promise(resolve => setTimeout(resolve, 2000)); // 模拟异步获取数据
    data.push(...['New Data']); // 添加新数据到现有数据
    loadingMore = false;
}

$: loadingMore || infiniteHandler();
function infiniteHandler() {
    if (!loadingMore) {
        loadingMore = true;
        fetchMoreData();
    }
}
</script>

<VirtualList
    width="100%"
    height={window.innerHeight - 100} // 调整窗口高度减去头部等其他部分
    itemCount={data.length}
    itemSize={50}>
    <!-- 重复之前的item定义 -->
    
    <div slot="footer">
        <InfiniteLoading on:infinite={infiniteHandler} />
    </div>
</VirtualList>

结合这些组件，你可以创建既高效又具备丰富用户体验的应用程序。记住，在实际开发中，合理设计数据加载策略对于提升用户体验至关重要。

svelte-tiny-virtual-list A tiny but mighty list virtualization library for Svelte, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more! 项目地址: https://gitcode.com/gh_mirrors/sv/svelte-tiny-virtual-list