svelte-tiny-virtual-list + svelte-infinite-loading 在页面加载时崩溃答案

【问题标题】：svelte-tiny-virtual-list + svelte-infinite-loading crashing on page loadsvelte-tiny-virtual-list + svelte-infinite-loading 在页面加载时崩溃
【发布时间】：2021-05-03 07:35:50
【问题描述】：

我用过svelte-infinite-loading，一开始效果很好，但随着列表变得很长，我的 Web 应用开始使用大量内存，最多使用 2gb。

所以，我需要虚拟化这个无限列表。我按照svelte-infinite-loading作者的推荐使用了svelte-tiny-virtual-list：

<script>
    ....

    function onInfinite({ detail }) {
        const skip = items !== undefined ? items.length : 0;
        fetchItems(skip).then((data) => {
            if (data.length === 0) {
                items = [];
                detail.complete();
                return;
            }
            if (items === undefined) items = data;
            else items = [...items, ...data];
            detail.loaded();
        });
    }

    onMount(() => {
        fetchItems(0).then((data) => {
            Items = data;
        });
    });
</script>

{#if items !== undefined}
        {#if items.length === 0}
            <p><i>No items found</i></p>
        {:else}
            <VirtualList
                itemCount={items.length}
                itemSize={200}
                height="100%">

                <div slot="item" let:index>
                    <Item
                        item={items[index]} />
                </div>

                <div slot="footer">
                    <InfiniteLoading on:infinite={onInfinite} />
                </div>
        </VirtualList>
    {/if}
{/if}

页面加载时问题来了：

前几个项目被正确获取并显示，但页面增长到异常长度，然后列表消失，我收到以下错误：

InfiniteLoading.svelte:103 executed the callback function more than 10 times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it.

我做错了什么？

【问题讨论】：

标签： infinite-scroll svelte

【解决方案1】：

VirtualList 创建项目直到列表的高度超过父项的高度。然后它伪造一个滚动条来选择它应该呈现的项目。

显然，您将VirtualList 放置在没有高度/最大高度的容器中，它无法确定应该创建多少项目。

您必须在父元素上设置max-height 或height。

【讨论】：