react 组件库之一 小型分页

react组件库 小型分页

• 是采用dumi自带的api配置直接自动生成api表格
• 代码采用的是ts格式

API文档配置

export interface PaginationProps {
  /**
   * @description 总条目数
   * @default 10
   */
  totalPages?: number;
  /**
   * @description 是否使用小型分页样式
   * @default false
   */
  small?: Boolean;

  /**
   * @description 每页显示条目个数，支持 .sync 修饰符
   * @default 7
   */
  page?: number;

  /**
   * @description 是否禁用
   * @default false
   */
  disabled?: boolean;

  /**
   * @description 组件布局，子组件名用逗号分隔
   * @default 'prev, pager, next, jumper, ->, total'
   */
  layout?: String;

  /**
   * @description 替代图标显示的上一页文字
   * @default <
   */
  prevtext?: String;

  /**
   * @description 替代图标显示的下一页文字
   * @default >
   */
  nexttext?: String;
}

首先自定义默认参数

{
  totalPages = 10,//默认页数
  small, // 小型尺寸
  page = 7,//默认页数
  disabled,//状态
  prevtext = '<', //左按钮默认图标
  nexttext = '>',// 右按钮默认图标
}

react useState初始配置

 const [currentPage, setCurrentPage] = useState<number>(1);
  const [startPage, setStartPage] = useState<number>(1);
  const [endPage, setEndPage] = useState<number>(page);

根据当前页和总页数计算显示的起始页码和终止页码

 // 根据当前页和总页数计算显示的起始页码和终止页码
  const calculatePages = () => {
    let start = currentPage - 3;
    let end = currentPage + 3;

    if (start <= 1) {
      start = 1;
      end = start + 6;
    }

    if (end >= totalPages) {
      end = totalPages;
      start = end - 6;
      if (start <= 1) {
        start = 1;
      }
    }

    setStartPage(start);
    setEndPage(end);
  };

点击第几页到第几页

  const handlePageClick = (pageNumber: number) => {
    if (disabled) return;
    setCurrentPage(pageNumber);
  };

上一页和下一页按钮操作

  const preclick = () => {
    if (disabled) return;
    let pre = currentPage - 1;
    if (pre <= 1) {
      pre = 1;
    }
    setCurrentPage(pre);
  };

  const nextclick = () => {
    if (disabled) return;
    let next = currentPage + 1;
    if (next >= totalPages) {
      next = totalPages;
    }
    setCurrentPage(next);
  };

最后渲染页面

return (
    <div className={style.main}>
      <ul className={`${style.page} ${small ? style.small : ''} ${disabled ? style.disabled : ''}`}>
        <li onClick={preclick}>{prevtext}</li>

        {/* 生成动态的页码列表 */}
        {startPage > 1 && (
          <>
            <li onClick={() => handlePageClick(1)}>1</li>
            {startPage > 2 && <li>...</li>}
          </>
        )}
        {Array.from({ length: endPage - startPage + 1 }, (_, index) => (
          <li
            key={startPage + index}
            className={currentPage === startPage + index ? style.active : ''}
            onClick={() => handlePageClick(startPage + index)}
          >
            {startPage + index}
          </li>
        ))}
        {endPage < totalPages && (
          <>
            {endPage < totalPages - 1 && <li>...</li>}
            <li onClick={() => handlePageClick(totalPages)}>{totalPages}</li>
          </>
        )}

        <li onClick={nextclick}>{nexttext}</li>
      </ul>
    </div>
  );

全部代码

import React, { useState, useEffect } from 'react';
import style from './pagination.less';
import { PaginationProps } from './interface';

const Pagination: React.FC<PaginationProps> = ({
  totalPages = 10,
  small,
  page = 7,
  disabled,
  prevtext = '<',
  nexttext = '>',
}) => {
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [startPage, setStartPage] = useState<number>(1);
  const [endPage, setEndPage] = useState<number>(page);

  const handlePageClick = (pageNumber: number) => {
    if (disabled) return;
    setCurrentPage(pageNumber);
  };

  const preclick = () => {
    if (disabled) return;
    let pre = currentPage - 1;
    if (pre <= 1) {
      pre = 1;
    }
    setCurrentPage(pre);
  };

  const nextclick = () => {
    if (disabled) return;
    let next = currentPage + 1;
    if (next >= totalPages) {
      next = totalPages;
    }
    setCurrentPage(next);
  };

  // 根据当前页和总页数计算显示的起始页码和终止页码
  const calculatePages = () => {
    let start = currentPage - 3;
    let end = currentPage + 3;

    if (start <= 1) {
      start = 1;
      end = start + 6;
    }

    if (end >= totalPages) {
      end = totalPages;
      start = end - 6;
      if (start <= 1) {
        start = 1;
      }
    }

    setStartPage(start);
    setEndPage(end);
  };

  // 在组件渲染过程中计算页码范围
  useEffect(() => {
    calculatePages();
  }, [currentPage, totalPages]);

  return (
    <div className={style.main}>
      <ul className={`${style.page} ${small ? style.small : ''} ${disabled ? style.disabled : ''}`}>
        <li onClick={preclick}>{prevtext}</li>

        {/* 生成动态的页码列表 */}
        {startPage > 1 && (
          <>
            <li onClick={() => handlePageClick(1)}>1</li>
            {startPage > 2 && <li>...</li>}
          </>
        )}
        {Array.from({ length: endPage - startPage + 1 }, (_, index) => (
          <li
            key={startPage + index}
            className={currentPage === startPage + index ? style.active : ''}
            onClick={() => handlePageClick(startPage + index)}
          >
            {startPage + index}
          </li>
        ))}
        {endPage < totalPages && (
          <>
            {endPage < totalPages - 1 && <li>...</li>}
            <li onClick={() => handlePageClick(totalPages)}>{totalPages}</li>
          </>
        )}

        <li onClick={nextclick}>{nexttext}</li>
      </ul>
    </div>
  );
};

export default Pagination;