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

在Svelte中循环遍历列表并每行显示4项，可以使用Svelte的#each指令和CSS的grid布局来实现。

首先，确保你已经有一个包含要遍历的列表数据的数组。假设这个数组名为items。

然后，在Svelte组件中，使用#each指令来遍历items数组，并将每个项命名为item：

<script>
  let items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'];
</script>

<div class="grid-container">
  {#each items as item}
    <div class="grid-item">{item}</div>
  {/each}
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 每行显示4列 */
    grid-gap: 10px; /* 列之间的间距 */
  }

  .grid-item {
    /* 样式设置 */
  }
</style>

在上面的代码中，我们使用了grid-template-columns属性来定义每行显示4列。repeat(4, 1fr)表示重复4次1fr单位，即将容器平均分成4列。

通过这种方式，每个项都会被包裹在一个<div class="grid-item">元素中，并在网格布局中显示。

你可以根据需要自定义.grid-item的样式，以适应你的设计需求。

这是一个基本的示例，你可以根据实际情况进行修改和扩展。如果你想了解更多关于Svelte的信息，可以访问腾讯云的Svelte产品介绍页面。