连续5列数据时分页

Question

我厌倦了在 ui 视图中显示五个块。单击“下一个”按钮后，接下来的五个数据应显示和隐藏前 5 个数据块，就像单击“下一个”按钮，显示下一组 5。我的代码在这里使用 javscript/react

.parent{
    display: flex;
}

.child{
    margin: 2% 0 0 0;
    width: 33%;
}

 <div className="parent"  >
              {list &&  
              list.data.map((item, index) => (
                <div key={index} className="child">
                  {item.name}
                </div>
            ))}
           </div>

Answer 1

对于简单的分页，您可以使用 Array.slice()

    <div className="parent">
  {list &&
    list.data
      .map((item, index) => (
        <div key={index} className="child">
          {item.name}
        </div>
      ))
      .slice(pageNum * 5, (pageNum + 1) * 5)}
</div>;

并添加 useState 来通过单击按钮更改 pageNum 。

const [pageNum, setPageNum] = useState(0);

为按钮创建 clickHandler 来递增/递减 pageNum。