React组件数据分页与滑动卡片展示教程

const personArr = [
  {
    img: 'path/to/img1.jpg',
    name: '张三',
    post: '软件工程师',
    exp: '工作经验：5年',
  },
  {
    img: 'path/to/img2.jpg',
    name: '李四',
    post: '产品经理',
    exp: '工作经验：3年',
  },
  {
    img: 'path/to/img3.jpg',
    name: '王五',
    post: 'UI设计师',
    exp: '工作经验：8年',
  },
  {
    img: 'path/to/img4.jpg',
    name: '赵六',
    post: '数据分析师',
    exp: '工作经验：2年',
  },
  {
    img: 'path/to/img5.jpg',
    name: '孙七',
    post: '项目经理',
    exp: '工作经验：10年',
  },
  {
    img: 'path/to/img6.jpg',
    name: '周八',
    post: '前端开发',
    exp: '工作经验：4年',
  },
  // ... 更多数据
];

export { personArr };

import React from 'react'; // 即使不使用Hook，最佳实践也应引入React

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>
  );
};

export default Person;

import React, { useState } from 'react'; // 引入 useState Hook
import Person from '../person/Person';
import './personList.css'; // 假设有CSS文件来控制布局
import { personArr } from '../helpers/personList';

const PersonList = () => {
  // 1. 定义当前页码状态，初始为第一页
  const [page, setPage] = useState(1);
  // 2. 定义每页显示的项目数量
  const pageSize = 3; // 例如，每页显示3张卡片

  // 计算当前页数据的起始索引
  const startIndex = (page - 1) * pageSize;
  // 计算当前页数据的结束索引（不包含）
  const endIndex = pageSize * page;

  // 使用 slice() 方法获取当前页的数据
  const currentPersons = personArr.slice(startIndex, endIndex);

  // 计算总页数，用于判断“前进”按钮是否禁用
  const totalPages = Math.ceil(personArr.length / pageSize);

  return (
    <div className="list_wrapper">
      {/* 渲染当前页的人物卡片 */}
      {currentPersons.map((el, i) => {
        return (
          <Person
            key={startIndex + i} // 确保 key 的唯一性，使用全局索引更稳健
            name={el.name}
            post={el.post}
            img={el.img}
            exp={el.exp}
          />
        );
      })}

      {/* 导航按钮 */}
      <div className="pagination_controls">
        <button
          // 当当前页码小于等于1时，禁用“后退”按钮
          disabled={page <= 1}
          onClick={() => setPage((prev) => prev - 1)}
        >
          Backward
        </button>
        <button
          // 当当前页码大于等于总页数时，禁用“前进”按钮
          disabled={page >= totalPages}
          onClick={() => setPage((prev) => prev + 1)}
        >
          Forward
        </button>
      </div>
    </div>
  );
};

export default PersonList;

.list_wrapper {
  display: flex; /* 使用Flexbox布局 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  gap: 20px; /* 卡片之间的间距 */
  /* 其他样式，如宽度限制，居中等 */
  max-width: 960px; /* 假设每张卡片300px，3张卡片加间距 */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  flex-wrap: nowrap; /* 不换行，确保卡片在一行 */
}

.person_wrapper {
  flex: 0 0 calc(33.33% - 13.33px); /* 3张卡片，减去间距的影响 */
  max-width: calc(33.33% - 13.33px);
  min-width: 280px; /* 确保卡片不会过小 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
}

.pagination_controls {
  margin-top: 20px;
  text-align: center;
}

.pagination_controls button {
  padding: 10px 20px;
  margin: 0 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 5px;
}

.pagination_controls button:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
  opacity: 0.6;
}