在React中实现卡片列表的分页与滑动展示

import React, { useState } from 'react';
import Person from '../person/Person'; // 假设Person组件已定义
import { personArr } from '../helpers/personList'; // 假设personArr数据数组已定义
import './personList.css'; // 假设有相应的CSS文件

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

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

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

  // ... (JSX渲染部分)
};

export default PersonList;

// ... (PersonList组件内部)

  return (
    <div className="list_wrapper">
      {/* 渲染当前页的卡片 */}
      {currentPersons.map((el, i) => {
        return (
          <Person
            key={i} // 注意：在实际项目中，如果数据有唯一ID，应使用唯一ID作为key
            name={el.name}
            post={el.post}
            img={el.img}
            exp={el.exp}
          />
        );
      })}

      {/* 后退按钮 */}
      <button disabled={page <= 1} onClick={() => setPage((prev) => prev - 1)}>
        Backward
      </button>

      {/* 前进按钮 */}
      <button
        disabled={personArr.length / pageSize <= page} // 判断是否已是最后一页
        onClick={() => setPage((prev) => prev + 1)}
      >
        Forward
      </button>
    </div>
  );
};

import React, { useState } from 'react';
import Person from '../person/Person';
import './personList.css';
import { personArr } from '../helpers/personList'; // 假设personArr数组在此文件或其父目录中定义并导出

const PersonList = () => {
  const [page, setPage] = useState(1);
  const pageSize = 3; // 每页显示3张卡片

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

  // 获取当前页的卡片数据
  const currentPersons = personArr.slice(startIndex, endIndex);

  return (
    <div className="list_wrapper">
      {/* 渲染当前页的Person卡片 */}
      {currentPersons.map((el, i) => {
        return (
          <Person
            key={i} // 注意：如果el对象有唯一ID，建议使用el.id作为key
            name={el.name}
            post={el.post}
            img={el.img}
            exp={el.exp}
          />
        );
      })}

      {/* 后退按钮 */}
      <button disabled={page <= 1} onClick={() => setPage((prev) => prev - 1)}>
        Backward
      </button>

      {/* 前进按钮 */}
      <button
        disabled={personArr.length / pageSize <= page}
        onClick={() => setPage((prev) => prev + 1)}
      >
        Forward
      </button>
    </div>
  );
};

export default PersonList;

import React from 'react';
import './person.css'; // 假设有相应的CSS文件

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;

const personArr = [
  {
    img: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=Person1',
    name: '张三',
    post: '软件工程师',
    exp: '工作经验：5年',
  },
  {
    img: 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Person2',
    name: '李四',
    post: '产品经理',
    exp: '工作经验：8年',
  },
  {
    img: 'https://via.placeholder.com/150/00FF00/FFFFFF?text=Person3',
    name: '王五',
    post: 'UI/UX设计师',
    exp: '工作经验：3年',
  },
  {
    img: 'https://via.placeholder.com/150/FFFF00/000000?text=Person4',
    name: '赵六',
    post: '数据分析师',
    exp: '工作经验：6年',
  },
  {
    img: 'https://via.placeholder.com/150/FF00FF/FFFFFF?text=Person5',
    name: '钱七',
    post: '市场专员',
    exp: '工作经验：2年',
  },
  {
    img: 'https://via.placeholder.com/150/00FFFF/000000?text=Person6',
    name: '孙八',
    post: '项目经理',
    exp: '工作经验：10年',
  },
];

export { personArr };