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

Question

我用过svelte-infinite-loading，一开始还不错，但是随着列表变得很长，我的网络应用程序开始使用大量内存，使用量高达 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.

我做错了什么？

Answer 1

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

显然，您已将 VirtualList 放入没有 height/max-height 的容器中，它无法确定应创建多少项目。

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

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

svelte-tiny-virtual-list + svelte-infinite-loading crashing on page load

infinite-scroll

svelte