如何循环列表并在 svelte 中每行显示 4 个项目

Question

我有以下代码

<script>
    let cats = [
        { id: 'OUtn3pvWmp1', name: 'Cat1' },
        { id: 'OUtn3pvWmp2', name: 'Cat2' },
        { id: 'OUtn3pvWmp3', name: 'Cat3' },
        { id: 'OUtn3pvWmp4', name: 'Cat4' },
        { id: 'OUtn3pvWmp5', name: 'Cat4' },
        { id: 'OUtn3pvWmp6', name: 'Cat6' },
        { id: 'OUtn3pvWmp7', name: 'Cat7' },
        { id: 'OUtn3pvWmp8', name: 'Cat8' },
        { id: 'OUtn3pvWmp9', name: 'Cat9' },
    ];
</script>
<style>
    .first{ background-color:pink}
    .second{ background-color:yellow;padding-top:10px}
    .third{ background-color:green;padding-top:10px}
</style>

我想遍历数据并像这样每行显示 4 个项目作为输出。

<h1>The Famous Cats of YouTube</h1>
  <div class="row first">
    <main class="col-md-10 col-md-10 col-lg-10 px-md-4 pt-1" role="main">
      <div class="row first">
        <div class="card-group">
          <div class="card">cat1</div>
                     <div class="card">cat2</div>
                     <div class="card">cat3</div>
                     <div class="card">cat4</div>
           </div>
            </div> <!--end row -->
                <div class="row second">
                        <div class="card-group">
                            <div class="card">cat5</div>
                             <div class="card">cat6</div>
                             <div class="card">cat7</div>
                             <div class="card">cat8</div>
                     </div>
             </div> <!--end row -->
              <div class="row third">
                        <div class="card-group">
                             <div class="card">cat9</div>
                </div>
            </div><!--end row -->
    </main>
</div>

Answer 1

基于列表的实现可能如下所示：

使用模运算：

{#each cats as cat, i}
    {#if i % 4 === 0}
        <div>{cats[i]}</div>
        <div>{cats[i + 1]}</div>
        <div>{cats[i + 2]}</div>
        <div>{cats[i + 3]}</div>
    {/if}
{/each}

要按照描述排列 <div> 标签，您的示例中需要额外的 css。添加：

您必须为行定义 css 类和 card-group。

<style>
.row {
display:grid;
grid-columns: 4;
}

.card-group {
display: flex;
}
</style>

Answer 2

这是我使用的方式。每行的列数是一个变量。这使用模数学。有一个 if 条件检查数组中是否存在某个项目，以确保您没有使用越界索引。

<script>
let cols = 4;
let cats = [...];
</script>

{#each cats as cat, i}
    {#if i % cols === 0}
     <div class="row">
      {#each Array(cols) as _,j}
        {#if cats[i/cols*cols + j]}
        <div class="col">{cats[i/cols*cols + j]}</div>     
         {/if}
       {/each}
      </div>
    {/if}
{/each}

如何循环列表并在 svelte 中每行显示 4 个项目

how to loop over list and display 4 items per row in svelte

svelte

svelte-3