前端使用vue框架中简单的分页实现方法

在之前mvc架构开发的时候我们如果实现分页，一般是后端把数据给我们，然后我们直接渲染到页面，随着技术的发展，对前端的要求也越来越高了，有些场景需要前端来实现长列表以及分页的功能，这就对我们的技术提出了更高的要求，本文小编主要介绍一下前端vue框架中实现分页的方法。

我们需要设置的变量

接收后端数据、每页展示的数据、分页数量、当前页面

data() {
    return {
      // 后台传来的数据来源
      data: [],
      // 所有页面的数据
      totalPage: [],
      // 每页显示数量
      pageSize: 5,
      // 总页数
      pageNum: 1,
      // 当前显示的数据
      dataShow: [],
      // 当前显示第几页
      currentPage: 0
    };
  },

首先我们计算一下总的页码

主要目的是为了渲染页码，有了总页码我们就可以直接渲染页码了。

// 这里简单模拟一下后台传过来的数据
    for (let i = 0; i < 601; i++) {
      this.data.push({ name: "liu" ,look:"very handsome"});
    }
    // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
    this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;

渲染页码

for (let i = 0; i < this.pageNum; i++) {
      // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
      this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
    }
   // 获取到数据后显示第一页内容
    this.dataShow = this.totalPage[this.currentPage];

然后我们设置上一页下一页

// 上一页和下一页
    // 下一页
    nextPage() {
      if (this.currentPage === this.pageNum - 1) return ;
      this.dataShow = this.totalPage[++this.currentPage];
    },
    // 上一页
    prePage() {
      if (this.currentPage === 0) return ;
      this.dataShow = this.totalPage[--this.currentPage];
    }

通过以上的设置，前端整个页码功能就制作完毕了，当然你还可以拓展制作一下长列表展示，我会在后面的文章中介绍长列表渲染的方法，记住网址不迷路喔。