只有上一页和下一页的列表分页（React）

//分页函数

//num为区分点击的是左箭头还是右箭头

changePage(num) {

// console.log(this.state.pagenum)   拿到初始化时设置的每页展示的数量

//console.log(this.state.datas)    拿到所有需要做分页的数据

let totalpage=Math.ceil( this.state.datas.length/this.state.pagenum)

//共分为多少页，向上取整

var arr=[];

if(num==1&&totalpage-1>this.state.count){

this.state.count++;

// 点击的次数，初始化需设置为0

for(var i=this.state.pagenum * this.state.count;i< this.state.pagenum * ( this.state.count +1 );i++){

if(i>this.state.datas.length-1){

}else{

arr.push(this.state.datas[i])

//每次点击存为一个新的数组，即为点击下一页的时候需要展示的数据

}

}

this.setState({

list:arr, 

//list为初始化时的一个数组，在挂载时就需要截取数组在页面加载时展示的第一部分数据，此时应该被设置为点击后的数据

count:this.state.count,

//修改count的值，count的值必须存起来，以备在点击上一页时使用

})

//console.log(this.state.count)

}else if(num==-1&&this.state.count>0){

this.state.count--;

for(var i=this.state.pagenum * this.state.count;i< this.state.pagenum * ( this.state.count +1 );i++){

arr.push(this.state.datas[i])

}

this.setState({

list:arr,

count:this.state.count,

})

}

//console.log(this.state.count)   两次打印的count应一致

}

 

render(){

return （

{this.state.total > 5 && <div className={styles.modal_list_foot}>

//当需要渲染的数据小于每页需要展示的数据量时，分页不显示

<img src={left} onClick={() => this.changePage(-1)} />

&nbsp;&nbsp;

<img src={right} onClick={() => this.changePage(1)} />

</div>}

）

}