时间戳

首页 > 解决方案 > Svelte Tabs - 不要重新加载/销毁数据

javascript - Svelte Tabs - 不要重新加载/销毁数据

问题描述

我正在使用此处描述的苗条标签组件：

https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.5.1

在两个选项卡中，我有以下苗条的模板代码：

<TabPanel>
    <Filter/>
    <div id='to-filter' class='scroll-container'>
        {#each value.items as item, i}
                <Item 
                itemFilter={item.name}  
                itemDay={item.itemDay} 
                itemMonth={item.itemMonth} 
                itemYear={item.itemYear} 
                itemCity={item.itemCity} 
                itemCountry={item.itemCountry} 
                itemVenue={item.venue}
                itemLink={item.link}
                itemDotw={itemDatesOnly[i].itemDotw}
                />
        {/each}
    </div>
</TabPanel>

每次我单击选项卡在数据之间切换时，似乎都会重新加载或重建它。如何调整选项卡组件，使其不会每次都破坏数据？

标签： javascripttemplatingsvelte

解决方案

替换TabPanel.svelte中的以下代码块

{#if $selectedPanel === panel}
    <slot></slot>
{/if}

像这样：

<div hidden={$selectedPanel !== panel}>
    <slot></slot>
</div>

这将确保所有当前未激活的选项卡面板都获得一个hidden属性，使它们对用户不可见，但它们将存在于 DOM 中。

这应该可以防止您的嵌套组件被重新渲染，因为当您在选项卡之间切换时它们不会被破坏和重新安装。

推荐阅读