重构-分页器

落日映苍穹つ 2021-07-24 15:14 370阅读 0赞

动画:
    	无
    
    实现:
    	startX变量来记录要渲染的中间按钮的起始页数
    	pageNum变量来表示要渲染的中间按钮的个数
    	currtX变量来记录当前的页数
    	
    	(1)首尾固定数值
    	
    	(2)根据传递的中间按钮要显示的个数
    		如果要显示的个数+首尾固定的2个数<=总页数,则不会出现省略号,
    		
    	(3)渲染中间按钮个数
    		1、要渲染的个数(根据数组长度进行,故数组内容可以为任意值)
    			如果pageNum+首尾2个数字>=总页数,则要渲染的个数为总页数-2
    			否则,即为要渲染的pageNum个数
    		
    		2、每次点击获取到当前页数
    	
    		3、通过useEffect来监听currtX的变化
    			
    			出现后省略号:当前页数>(props.pageNum+1)/2+1,即超过设置长度的一半
    				startX=2;
    				其他临界设置;
    				
    		    出现前省略号:当前页数>props.totalPage - (props.pageNum-1)/2-1,即小于设置长度的一半
    		    	startX=总页数 - pageNum;
    		    	其他零件设置
    		    	
    		    出现前后省略号:在二者之间时,startX=currtX - (props.pageNum-1)/2,使得开始页数和当前页数之间的长度为设置的pageNum一半
    				其他临界设置
    
    参数:
    	  totalPage: PropTypes.number,		总页数
    	  pageNum: PropTypes.number,    	除了首尾,中间要显示的页数,默认为5
    	  onChange: PropTypes.func,			改变回调,参数为当前页数
    	  width: PropTypes.string,			页数框的宽度
    	  height: PropTypes.string,			页数框的高度
    	  fontSize: PropTypes.string,		页数框的字体大小
    	  fontColor:PropTypes.string,		页数框的字体颜色
    	  color: PropTypes.string,			页数框的背景色
    	  margin:PropTypes.string,			页数框的左右间距
    	  arrayWidth: PropTypes.string,		前后按钮框的宽度
    	  arrayHeight: PropTypes.string,	前后按钮框的高度
    	  arrayFontSize: PropTypes.string,	前后按钮框的字体大小
    	  arrayFontColor: PropTypes.string, 前后按钮框的字体颜色
    	  arrayColor: PropTypes.string,		前后按钮框的背景色
    	  arrayMargin: PropTypes.string,	前后按钮框分别的右间距、左间距
    	  hoverColor: PropTypes.string,		hover字体颜色
    	  disabledColor: PropTypes.string,	达到临界,禁用框的背景色
    	  disabledFontColor: PropTypes.string, 	达到临界,禁用框的字体颜色

效果图:  
![在这里插入图片描述][20201212171538316.png]  
![在这里插入图片描述][20201212171544684.png]  
![在这里插入图片描述][20201212171553180.png]  
![在这里插入图片描述][20201212171604838.png]  
![在这里插入图片描述][20201212171643112.png]  
使用:

import React,{ useState} from 'react'
    import './pagination/pagination'
    import Pagination from './pagination/pagination'
    
    function App() { 
      
      const _onChange = function (page)
      { 
        console.log('js:'+page);
      }
    
      return(
    
        <div>
          <Pagination  onChange={ _onChange} pageNum={ 3} totalPage={ 8}></Pagination>
        </div>
      )
    }
    
    export default App

pagination.jsx:

import React, {  useState,useEffect,useCallback,useRef,useMemo } from 'react'
    import PropTypes from 'prop-types'
    import './pagination.css'
    
    /** * startX=currtX - (props.pageNum-1)/2,在前后省略号出现的临界值之间时,改变startX,使得开始页数和当前页数之间的长度为设置的pageNum一半 * 点击按钮让currtX+/-1 * 点击数字让curret变化 * 根据startX来渲染中间五个 * 当前页数大于(props.pageNum+1)/2+1,即超过设置长度的一半 * props.totalPage - (props.pageNum-1)/2-1,即小于设置长度的一半 * */
    
    function App(props){ 
    
      const [startX, setStartX] = useState(2);
      const [currtX, setCurrtX] = useState(1);
      const [showPoints, setShowPoints] = useState(true);
      const [showStartPoints, setShowStartPoints] = useState(false);
      const [showEndPoints, setShowEndPoints] = useState(true);
      let [pageArr, setPageArr] = useState([]);
      const pagef = useRef(null);
    
      //初始化样式设置
      useEffect(() => { 
        _styleHandler('width');
        _styleHandler('height');
        _styleHandler('fontSize');
        _styleHandler('fontColor');
        _styleHandler('color');
    
        _styleHandler('margin');
        _styleHandler('arrayWidth');
        _styleHandler('arrayHeight');
        _styleHandler('arrayFontSize');
        _styleHandler('arrayFontColor');
    
        _styleHandler('arrayColor');
        _styleHandler('arrayMargin');
        _styleHandler('hoverColor');
        _styleHandler('disabledColor');
        _styleHandler('disabledFontColor');
        
      }, [])
    
      //监听总页数,设置除首尾按钮外的数字个数
      useEffect(() => { 
        
        pageArr = [];
        if (props.totalPage <= props.pageNum + 2)
        { 
          for (let i = 0; i < props.totalPage-2; i++)
          { 
            pageArr.push(1);
          }
          setPageArr([...pageArr]);
          setShowPoints(false);
        } else { 
          
          for (let i = 0; i < props.pageNum; i++)
          { 
            pageArr.push(1);
          }
          setPageArr([...pageArr]);
          setShowPoints(true);
        }
      }, [props.totalPage])
    
      //监听当前页数,设置除首尾按钮外的开始数字、省略号的显示以及外传回调
      useEffect(() => { 
        if (!showPoints)
        { 
          props.onChange(currtX);
          return;
        }
        
        if (currtX > _showPrePointsNum&&currtX < _showSufPointsNum)
        { 
          setStartX(currtX - (props.pageNum-1)/2);
          setShowStartPoints(true);
          setShowEndPoints(true);
        }
    
        if (currtX <= _showPrePointsNum)
        { 
          setStartX(2);  
          setShowStartPoints(false);
          setShowEndPoints(true);
        }
        if (currtX >=_showSufPointsNum) { 
          setStartX(props.totalPage - props.pageNum);  
          setShowEndPoints(false);
          setShowStartPoints(true);
        }
    
        props.onChange(currtX);
    
      }, [currtX])
    
      //统一初始化处理
      const _styleHandler = useCallback((key) => { 
        props[key] && pagef.current.style.setProperty('--' + key, props[key])
        
      }, [])
    
      //处理前省略号出现的零界点的值
      const _showPrePointsNum = useMemo(() => { 
        return (props.pageNum+1)/2+1    
      },[currtX])
      
      //处理后省略号出现的零界点值
      const _showSufPointsNum = useMemo(() => { 
        return props.totalPage - (props.pageNum-1)/2-1
      },[])
    
      //点击事件
      const _clickHandler = useCallback((page) => { 
        setCurrtX(page);
      },[])
      
      //箭头点击事件
      const _btnClickHandler = useCallback((type) => { 
        let res;
        if (type==='pre') { 
          if (currtX === 1)
            return;
          res = currtX - 1;  
        }
        else { 
          if (currtX === props.totalPage)
            return;
          res = currtX + 1;
        }
        res = Math.max(0, Math.min(props.totalPage, res));
        setCurrtX(res);
        
      },[currtX])
    
      return(
    
        <div className='jf-pagination-container' ref={ pagef}>
          <ul className='jf-pagination-inner'>
    
            <li className={ `jf-pagination-btn ${ currtX===1&&'jf-pagination-btn-disabled'}`} onClick={ ()=>{ _btnClickHandler('pre')}}>《</li>
            <li className={ `jf-pagination-numberstart ${ currtX===1&&'jf-pagination-number-active'}`} onClick={ () => {  _clickHandler(1) }}>1</li>
            { showPoints&& showStartPoints &&<li className='jf-pagination-points'>...</li>}
            { 
              pageArr.map((item, index) => { 
                return (
                  <li className={ `jf-pagination-number ${ (startX+index==currtX)&&'jf-pagination-number-active'}`} key={ item+index} onClick={ () => {  _clickHandler(startX+index) }}>
                    { startX+index}
                  </li>
                )
              })
            }
            { showPoints&& showEndPoints&&<li className='jf-pagination-points'>...</li>}
            <li className={ `jf-pagination-numberend ${ currtX===props.totalPage&&'jf-pagination-number-active'}`} onClick={ () => {  _clickHandler(props.totalPage) }}>{ props.totalPage}</li>
            <li className={ `jf-pagination-btn ${ currtX===props.totalPage&&'jf-pagination-btn-disabled'}`} onClick={ () => {  _btnClickHandler('suf') }}>》</li>
          
          </ul>
        </div>
      )
    }
    
    App.propTypes = { 
      totalPage: PropTypes.number,
      pageNum: PropTypes.number,
      onChange: PropTypes.func,
      width: PropTypes.string,
      height: PropTypes.string,
      fontSize: PropTypes.string,
      fontColor:PropTypes.string,
      color: PropTypes.string,
      margin:PropTypes.string,
      arrayWidth: PropTypes.string,
      arrayHeight: PropTypes.string,
      arrayFontSize: PropTypes.string,
      arrayFontColor: PropTypes.string,
      arrayColor: PropTypes.string,
      arrayMargin: PropTypes.string,
      hoverColor: PropTypes.string,
      disabledColor: PropTypes.string,
      disabledFontColor: PropTypes.string,
    }
    
    App.defaultProps = { 
      totalPage: 0,
      pageNum: 5,
      onChange:()=>{ }
    }
    
    export default React.memo(App)

pagination.css:

.jf-pagination-container { 
      display: inline-block;
      box-sizing: border-box;
    
      --width: 35px;
      --height: 28px;
      --fontSize: 16px;
      --fontColor: black;
      --color: white;
      --margin: 5px;
    
      /* --arrayWidth: 35px; --arrayHeight: 28px; --arrayFontSize: 16px; --arrayFontColor: black; --arrayColor: white; --arrayMargin: 5px; */
    
      --hoverColor: #409eff;
    
      --disabledColor: white;
      --disabledFontColor: black;
    }
    .jf-pagination-inner { 
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
    }
    
    .jf-pagination-inner > li { 
      width: var(--width);
      height: var(--height);
      background-color: var(--color);
      line-height: var(--height);
      color: var(--fontColor);
      font-size: var(--fontSize);
      text-align: center;
      margin: 0 var(--margin);
      cursor: pointer;
    }
    .jf-pagination-inner > li:hover { 
      color: var(--hoverColor);
    }
    
    .jf-pagination-inner > .jf-pagination-btn-disabled { 
      cursor: not-allowed;
    }
    
    .jf-pagination-inner > .jf-pagination-btn { 
      width: var(--arrayWidth, var(--width));
      height: var(--arrayHeight, var(--height));
      background-color: var(--arrayColor, var(--color));
      line-height: var(--arrayHeight, var(--height));
      color: var(--arrayFontColor, var(--fontColor));
      font-size: var(--arrayFontSize, var(--fontSize));
      text-align: center;
    }
    
    .jf-pagination-inner > .jf-pagination-btn:nth-of-type(odd) { 
      margin-right: var(--arrayMargin, var(--margin));
    }
    .jf-pagination-inner > .jf-pagination-btn:nth-of-type(even) { 
      margin-left: var(--arrayMargin, var(--margin));
    }
    
    .jf-pagination-inner > .jf-pagination-btn-disabled { 
      color: var(--disabledFontColor) !important;
      background-color: var(--disabledColor);
    }
    .jf-pagination-inner > .jf-pagination-btn-disabled:hover { 
      color: var(--disabledFontColor) !important;
    }
    
    .jf-pagination-inner > .jf-pagination-number-active { 
      color: var(--hoverColor);
    }

[20201212171538316.png]: /images/20210724/8adfcc0da4be44b0909f3ae1f89fd224.png
[20201212171544684.png]: /images/20210724/01901054bc774c43b4905a5f3d079efb.png
[20201212171553180.png]: /images/20210724/37dacbeb17d8462b95476ed7d60a12eb.png
[20201212171604838.png]: /images/20210724/0e27283e195a48e497d2fe95229e2b6e.png
[20201212171643112.png]: /images/20210724/4ab3b5e0a4024afeb443191cd0c37785.png