vue前端实现分页功能

定义

    totalPage: 1, // 统共页数，默认为1
    currentPage: 1, //当前页数 ，默认为1
    pageSize: 6, // 每页显示数量
    currentPageData: [] //当前页显示内
1
2
3
4

根据处理的数据 判断上一页和下一页

setCurrentPageData() {
    let begin = (this.currentPage - 1) * this.pageSize;
    let end = this.currentPage * this.pageSize;
    this.currentPageData = this.getshopinformation.slice(
     begin,
     end
    );
   },
   //上一页
   prevPage() {
    // console.log(this.currentPage);
    if (this.currentPage == 1) return;
    this.currentPage--;
    this.setCurrentPageData();

   },
   // 下一页
   nextPage() {
    if (this.currentPage == this.totalPage) return;
    this.currentPage++;
    this.setCurrentPageData();

   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

接收后端返回的参数 赋值进行处理

 // 计算一共有几页
     this.totalPage = Math.ceil(this.getshopinformation.length / this.pageSize);
     // 计算得0时设置为1
     this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
     this.setCurrentPageData();
1
2
3
4
5