需求:后端返回很多图片信息,需要对图片数据量进行分页处理,方便查看。还需要继续钻研!!
应用场景是,后端把所有的数据都给前端,前端进行分页显示,思路就是我们用一个变量存储所有的数据,然后根据所传的页码,在总数据中进行截取。
//数据进行分页显示
paging(e){
//计算出最大的页数上线
this.pageNumber=(this.total/this.pageSize)+1;
//如果传进来的页数在当前页数范围内
if(e<this.pageNumber){
//计算出当时当前页数,在总数据中截取的范围,pageSize是每页显示的数据量
const a=(e-1)*this.pageSize;
this.tableData=this.tableDataAll.slice(a,a+this.pageSize);
}
}
1.请求接口接收数据
一次性获取所有数据
this.alllist
展示列表数据
this.datalist
2.当页码改变
pagenum_change(num) {
this.pagenum = num;
this.datalist = this.alllist.slice(
(this.pagenum - 1) * this.pageSize,
this.pagenum * this.pageSize
);
}
3.当每页数量改变时
pagesize_change(size) {
this.pageSize = size;
this.datalist = this.alllist.slice(
(this.pagenum - 1) * this.pageSize,
this.pagenum * this.pageSize
);
},
原作者文章:前端数据分页