在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产品介绍页面。
领取专属 10元无门槛券
手把手带您无忧上云