react学习一个分页效果

参考链接：https://segmentfault.com/a/1190000016234603 方糖先生

下面直接附上源码，在基础上增加了上一页，下一页效果。

/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const isNumber = (num) => {
  return typeof num === 'number';
}
class Pagination extends  React.Component {
  constructor (props) {
      super(props);
  }
  // 点击回调事件    
  handleClick (item) {
    // 父组件回调事件
    this.props.cb(item);
  }
  next () {
    let num = this.props.cur+1
    this.props.cb(num)
  }
  prev() {
    let num = this.props.cur - 1
    this.props.cb(num)
  }
  render () {
      let {cur, space, all} = this.props;
      let pgObj = [];
      // 给不同的元素 赋值class
      const checkClass = (role, active) => {
          const defaultClass = 'pg-span';
          if (active) {
              return    `${defaultClass} active`
          }
          switch (role) {
              case 0: {
                  return `${defaultClass}`
              }
              case 1: {
                  return `${defaultClass}`
              }
              default: {
              }
          }
      }

      
      // 初始检查
      if (all < space) {
        space =  all
      }
      if (cur <= 0) {
          cur = 0
      }
      if (cur >= all) {
      cur = all
      } 
      // 阶段判断
      if (cur < space) {
          if (space === all) {
              for (let i = 1; i <= space; i++) {
                  pgObj.push({
                      page: i,
                      role: 0,
                      key: i
                  })
              }
          } else {
              for (let i = 1; i <= space; i ++) {
                  pgObj.push({
                      page: i,
                      role: 0,
                      key: i
                  })
              }
              pgObj.push({
                  page: '...',
                  role: 1,
                  key: 'next'
              })
              pgObj.push({
                  page: all,
                  role: 0,
                  key: all
              })
          }
      } else if (cur >= space && cur <= all - space + 1) {
          let odd = parseInt(space / 2);
          pgObj.push({
              page: 1,
              role: 0,
              key: 1
          });
          pgObj.push({
              page: '...',
              role: 1,
              key: 'pre'
          });
          for (let i = cur - odd; i <= cur + odd ; i ++) {
              pgObj.push({
                  page: i,
                  role: 1,
                  key: i
              })
          }
          pgObj.push({
              page: '...',
              role: 1,
              key: 'next'
          });
          pgObj.push({
              page: all,
              role: 1,
              key: all
          })
      } else {
          pgObj.push({
              page: 1,
              role: 0,
              key: 1
          });
          pgObj.push({
              page: '...',
              role: 1,
              key: 'pre'
          });
          for (let i = all - space + 1; i <= all; i ++) {
              pgObj.push({
                  page: i,
                  role: 0,
                  key: i
              })
          };
      }
      console.log(pgObj,'pg')
      return (
          <section>
              <span className="pg-span" onClick={()=>this.prev()} >上一页</span>
              {
                pgObj.map(item =>
                  (<span key={item.key}
                    className={checkClass(item.role, item.page === cur)}
                    onClick={() => {this.handleClick(item)}}
                    >
                      {item.page}
                      </span>))
              }
              <span className="pg-span" onClick={()=>this.next()}>下一页</span>
          </section>
      )
  }
  
}
class Root extends React.Component {
constructor (props) {
    super(props);
    this.state = {
      cur: 1
    };
    this.handlePagination = this.handlePagination.bind(this);
}
handlePagination (item) {
    const {page} = item;
    if(typeof item === 'number') {
      this.setState({
        cur: item
    })
      if(item<=1){
        this.setState({
          cur:1
        })
      }
      if(item>=100) {
        this.setState({
          cur:100
        })
      }
    }
    if (isNumber(page)) {
        this.setState({
            cur: page
        })
    }
}
render() {
  let {cur} = this.state;
  console.log(cur);
  
  return  (
    <div>
       <Pagination cur={cur} all={100} space={8} cb={this.handlePagination} />
    </div>
  )
}
};
ReactDOM.render(
<Root></Root>,
document.getElementById('root')
);

/index.css

.pg-span {
  display: inline-block;
  padding: 2px 0;
  width: 30px;
  margin: 0 5px;
  cursor: pointer;
  background: #f4f4f5;
  color: #606266;
  text-align: center;
  cursor: pointer;
}
.active {
  background: #409eff;
  color: #fff;
  cursor: pointer;
}

思路分析

三个重要指标：

cur:当前页面
space 可展示的页码数量
all 总页码数量

cur < space 与首相连
cur>space && cur<all-space 中间区域
cur>all-space 与尾相连
以此判断是否添加 “…”

另外

role，checkclass 的设定不是太理解，可能有其他的考量我不清楚。总之我按照我理解方便的改了一下。去掉这两个，改成push基本类型值，class使用三元表达式。

class Pagination extends  React.Component {
  constructor (props) {
      super(props);
  }
  // 点击回调事件    
  handleClick (item) {
    // 父组件回调事件
    this.props.cb(item);
  }
  next () {
    let num = this.props.cur+1
    this.props.cb(num)
  }
  prev() {
    let num = this.props.cur - 1
    this.props.cb(num)
  }
  render () {
      let {cur, space, all} = this.props;
      let pgObj = [];
      // 初始检查
      if (all < space) { //总页数=可展示数
        space =  all
      }
      if (cur <= 0) { //左边界处理
          cur = 0
      }
      if (cur >= all) { //右边界处理
      cur = all
      } 
      // 阶段判断
      if (cur < space) { //与首相连
          if (space === all) { //不显示...情况
              for (let i = 1; i <= space; i++) {  
                  pgObj.push(i)
              }
          } else { //显示...情况
              for (let i = 1; i <= space; i ++) {
                  pgObj.push(i)
              }
              pgObj.push("...")
              pgObj.push(all)
          }
      } else if (cur >= space && cur <= all - space + 1) { //首尾不沾的情况
          let odd = parseInt(space / 2);
          pgObj.push(1);
          pgObj.push("...");
          for (let i = cur - odd; i <= cur + odd ; i ++) {
              pgObj.push(i)
          }
          pgObj.push("...");
          pgObj.push(all)
      } else {
          pgObj.push(1);
          pgObj.push("...");
          for (let i = all - space + 1; i <= all; i ++) {
              pgObj.push(i)
          };
      }
      console.log(pgObj,'pg')
      return (
          <section>
              <span className="pg-span" onClick={()=>this.prev()} >上一页</span>
              {
                pgObj.map(item =>
                  (<span key={item.key}
                    className={item === cur ? "pg-span active" : "pg-span"}
                    onClick={() => {this.handleClick(item)}}
                    >
                      {item}
                      </span>))
              }
              <span className="pg-span" onClick={()=>this.next()}>下一页</span>
          </section>
      )
  }
}