React中实现卡片列表分页与滑动展示教程

import React, { useState } from 'react';
// ...其他导入

const PersonList = () => {
  const [page, setPage] = useState(1); // 初始化当前页码为第一页
  const pageSize = 3; // 每页显示3张卡片

  // ...
};

// ...
{personArr.slice((page - 1) * pageSize, pageSize * page).map((el, i) => {
  return (
    <Person
      key={i} // 注意：在实际项目中，key应使用数据项的唯一ID，而非索引i
      name={el.name}
      post={el.post}
      img={el.img}
      exp={el.exp}
    />
  );
})}
// ...

import React, { useState } from 'react'; // 引入useState
import Person from '../person/Person';
import './personList.css';
import { personArr } from '../helpers/personList'; // 假设这是您的数据源

// Person组件（保持不变，作为子组件渲染卡片）
const Person = ({ name, exp, post, img }) => {
  return (
    <div className="person_wrapper">
      <div className="person_img">
        <img src={img} alt={name} />
      </div>
      <div className="person_text">
        <h2 className="person_name"> {name} </h2>
        <p className="person_post"> {post} </p>
        <p className="person_exp"> {exp} </p>
      </div>
    </div>
  );
};

// PersonList组件（实现分页逻辑）
const PersonList = () => {
  const [page, setPage] = useState(1); // 当前页码，默认为1
  const pageSize = 3; // 每页显示卡片数量

  // 计算总页数，使用Math.ceil确保即使不满一页也算一页
  const totalPages = Math.ceil(personArr.length / pageSize);

  return (
    <div className="list_wrapper">
      {/* 根据当前页码和每页大小切片数组，并渲染Person组件 */}
      {personArr.slice((page - 1) * pageSize, pageSize * page).map((el, i) => {
        return (
          <Person
            // 最佳实践是使用数据中唯一的ID作为key，如果数据没有唯一ID，
            // 且数据项不会改变顺序或增删，可以使用索引i作为临时方案。
            key={i}
            name={el.name}
            post={el.post}
            img={el.img}
            exp={el.exp}
          />
        );
      })}
      <div className="pagination_controls">
        {/* 后退按钮，当处于第一页时禁用 */}
        <button disabled={page <= 1} onClick={() => setPage((prev) => prev - 1)}>
          Backward
        </button>
        {/* 前进按钮，当处于最后一页时禁用 */}
        <button
          disabled={page >= totalPages} // 使用totalPage来判断是否到达最后一页
          onClick={() => setPage((prev) => prev + 1)}
        >
          Forward
        </button>
      </div>
    </div>
  );
};

export default PersonList;

const personArr = [
  {
    img: 'path/to/image1.jpg',
    name: '张三',
    post: '软件工程师',
    exp: '工作经验：5年',
  },
  {
    img: 'path/to/image2.jpg',
    name: '李四',
    post: '项目经理',
    exp: '工作经验：8年',
  },
  {
    img: 'path/to/image3.jpg',
    name: '王五',
    post: 'UI/UX设计师',
    exp: '工作经验：3年',
  },
  {
    img: 'path/to/image4.jpg',
    name: '赵六',
    post: '数据分析师',
    exp: '工作经验：4年',
  },
  {
    img: 'path/to/image5.jpg',
    name: '钱七',
    post: '产品经理',
    exp: '工作经验：6年',
  },
  {
    img: 'path/to/image6.jpg',
    name: '孙八',
    post: '前端开发',
    exp: '工作经验：2年',
  },
];

export { personArr };

.list_wrapper {
  display: flex;
  flex-wrap: wrap; /* 允许卡片换行 */
  gap: 20px; /* 卡片之间的间距 */
  justify-content: center; /* 水平居中 */
  overflow: hidden; /* 隐藏超出容器的部分，为滑动效果做准备 */
  width: calc(3 * var(--card-width) + 2 * var(--gap)); /* 示例宽度，根据实际卡片宽度和间距调整 */
  /* 如果是真正的滑动效果，可能需要设置一个固定宽度和overflow-x: scroll */
}

.person_wrapper {
  flex: 0 0 calc(33.333% - 20px); /* 每行三列，减去间距 */
  max-width: 300px; /* 示例卡片最大宽度 */
  border: 1px solid #ccc;
  padding: 15px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.pagination_controls {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.pagination_controls button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.pagination_controls button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: not-allowed;
}