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

Posted 2023-03-10

【中文标题】svelte-tiny-virtual-list + svelte-infinite-loading 在页面加载时崩溃

【英文标题】：svelte-tiny-virtual-list + svelte-infinite-loading crashing on page load

【发布时间】：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
                >

                <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.

我做错了什么？

【参考方案1】：

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

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

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