React-分页器-（换页器）小组件

React-分页器-（换页器）小组件

样式效果

功能描述：当前页为1时，首页和左换页按钮消失
当但前页为最后一页时，最后一页和右换页按钮消失
，点击数组或者其他按钮会切换到相应页

组件所需参数：
pages_nus //当前页的ID
zongyeshu //总页数
max_nums //最大显示页数
clickAction（id） //更改当前页的函数

其父组件：
方法配置：

clickAction(id){
    this.setState(()=>({active_id:id-1}))
  }

使用：

<HuanYeQi max_nums={5} zongyeshu={this.state.data.length} pages_nus={this.state.active_id+1} clickAction={this.clickAction.bind(this)}></HuanYeQi>

//说明+1，是因为，数组的下标从0开始，页数从1开始

组件代码：

import React, { Component } from 'react';
import './HuanYeQi.less'
class HuanYeQi extends Component {
  constructor(props){
    super(props)
    this.state = {
      max_nums:[],
      qidian:1,
      alive_nums_styles:{backgroundColor:'#D5A265',color:'#000000'}
    }
  }
  componentDidMount(){
    const arr = [...new Array(Math.ceil(this.props.max_nums)).keys()];

    this.setState({
      max_nums:arr
    })
  }
  changpageAction(id){
    if(id>=this.state.qidian&&id<(this.state.qidian+this.props.max_nums)){
      this.props.clickAction(id)
    }else if(id===this.state.qidian+this.props.max_nums&&id!==this.props.zongyeshu){
      this.setState((state)=>{
        return {qidian:state.qidian+1}
      },()=>{
        this.props.clickAction(id)
      })
    }else if(id<this.state.qidian&&id>=1){
      this.setState(()=>{
        return {qidian:id}
      },()=>{
        this.props.clickAction(id)
      })
    }else if(id===this.props.zongyeshu){
      this.setState(()=>{
        return {qidian:id-this.props.max_nums+1}
      },()=>{
        this.props.clickAction(id)
      })
    }
  }
  render() {
    return (
      <div className='huanyeqi'>
        {this.props.pages_nus===1?'':(<div className='news_list_shouye' onClick={this.changpageAction.bind(this,1)} >首页</div>)}
        {this.props.pages_nus===1?'':(<div onClick={this.changpageAction.bind(this,this.props.pages_nus-1)} className='nums_style'>&lt;</div>)}
        {this.state.max_nums.map((max_item,max_index)=>{
          return (<div style={this.props.pages_nus===(max_item+this.state.qidian)?this.state.alive_nums_styles:{}} className='nums_style' key={'max_index_'+max_index} onClick={this.changpageAction.bind(this,max_item+this.state.qidian)}>{max_item+this.state.qidian}</div>)
        })}

        {this.props.pages_nus===this.props.zongyeshu?'':(<div onClick={this.changpageAction.bind(this,this.props.pages_nus+1)} className='nums_style'>&gt;</div>)}
        
        <div className='news_list_last' onClick={this.changpageAction.bind(this,this.props.zongyeshu)}>最后一页</div>
      </div>
    );
  }
}

export default HuanYeQi;

组件less:

.huanyeqi{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  >.nums_style{
    border: 1px solid #D5A265;
    color: #D5A265;
    width: 0.2rem;
    height: 0.2rem;
    font-size: 0.18rem;
    line-height: 0.2rem;
    text-align: center;
    border-radius: 50%;
  }
}

有使用问题的可以留言，我会及时回复滴，请忽略起名，在下英语知识浅薄，哈哈