苗条 html 列表块/段显示 -

Question

请原谅我糟糕的问题描述。我正在使用 svelte/sapper 组件。在该组件中，我使用预加载函数来访问 api 并检索 post 的列表。我在组件中显示该列表。我想将列表分成块（无论数字、5、10 等）并在我的

中显示该块

问题是我不知道从哪里开始或如何在 svelte 中开始。在这个 api 中，我知道数组中有多少 post，但在真实的 dbs 情况下，假设我不知道数组有多大或我有多少条目。我只需要拆分列表并显示它，而不知道我在组件中处理了多少条目。

这是我的 svelte 组件（它是许多 sapper 应用程序组件中的一个，但我不会 post nav.svelte 或我认为无关紧要的应用程序的其余部分）

我的component/page:

<script context="module">
  export async function preload() {
  const res = await this.fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();
  return { posts: data };

  }
</script>

<script>

/*
  export let posts;
  function ArrayChunking(arr, size) {
  var chunks = [];
  for(var i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i+size));
  }  
  return chunks;
}
   console.log(ArrayChunking(posts, 5));
*/ 

    export let posts;

</script>

<style>
  ol {
  background: #ff9999;
  padding: 20px;
  }

  ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
  } 
</style>

 <div> <!--Test API https://jsonplaceholder.typicode.com/ -->
      <p>++++ Posts from <a href="https://jsonplaceholder.typicode.com/posts" target="_blank">https://jsonplaceholder.typicode.com/posts</a> ++++</p>
      <ol>
        {#each posts as {title, body}, i}
        <li>
           {i * 2} -- {title} : {body}          
        </li>
        {/each}
      </ol>
 </div>

输出如下：

所以我想要实现的是在较小的组中列出的显示，因此每个组将是每个列表 5 个项目，然后是分隔线和另外 5 个项目，如下所示：

1-item one
2-item two
3-item three
4-item four
5-item five

========================

6-item 6
7-item 7
8-item 8
9-item 9
10-item 10

我不知道该怎么做。我什至不知道从哪里开始或应该在哪里输入，当我尝试 ArrayChunking 函数时，它是在脚本标签中的 js 但是当我将块放在

标签中时，它给了我 [object , 对象]

我会在 sapper 和 svelte 下归档，但也会在 html、css 和 js.

下归档

有什么想法吗？

Answer 1

您需要两级迭代。

在您的脚本标签中，将帖子分块到列表列表中：

import chunk from 'lodash/chunk'

const chunkSize = 5
const chunks = chunk(posts, chunkSize)

然后遍历块：

{#each chunks as chunk, i}

   {#each chunk as post, j}
      {(i * chunkSize) + j}. {post.title}
   {/each}

   ======================
{/each}

Answer 2

您可以按照 joshnuss 的建议将列表分成几块。或者，您可以在 each 循环内每隔五个元素添加分隔符：

{#each posts as {title, body}, i}
  <li>
    {i * 2} -- {title} : {body}          
  </li>

  {#if (i + 1) % 5 === 0}
    <hr>
  {/if}
{/each}

Demo here.

苗条 html 列表块/段显示 -

svelte html list chunks / segments display -

html

javascript

css

svelte

sapper