vue 数据手写分页算法，定时展示

我们在业务之中，其实会常常用到一些数据的分段展示 ， 比如数据量过大导致echarts无法展示，我们就可以将数据进行算法分页 ， 然后套用定时器实时更新分段数据；

例子展示 ： 将下列数组截取成每页5条数据的分页效果 ， 要求定时轮播不同页数的渲染数据

    this.arr = [
      { name: '1', id: '1' },
      { name: '2', id: '2' },
      { name: '3', id: '3' },
      { name: '4', id: '4' },
      { name: '5', id: '5' },
      { name: '6', id: '6' },
      { name: '7', id: '7' },
      { name: '8', id: '8' },
      { name: '9', id: '9' },
      { name: '10', id: '10' },
      { name: '11', id: '11' },
    ]

接下来请看我提供给你的效果图 ， 如果你也需要，请耐心看完这篇讲解哟~

开发思路 ：

1. 定义页数变量与总页数变量 这两个变量后期可以帮助我们进行数据的重置
2. 定义定时器标识 ， 后期帮助我们定时展示

分页思路：

1. 算出总页数：
   总页数 = 数组长度和每页多少条取余 ， 如果余为0，说明整除 ， 直接返回（数组长度/每页条数），如果余不为0，就说明有一页不满足每页最大条数，我们返回（数组长度/每页条数+1）即可
   相当于 ：
   数组长度11
   我设定每页条数5
   那么就是余下1 ， 余数不为0，直接就是（11/5+1）= 3 页 ， 第三页展示的数据就是余下的那条数据

2. 拿到每页数据
   我们通过数组的 slice（从哪开始[索引] ， 截止到哪结束[索引]），获取截取的每页数据
   从哪儿开始的索引 ：（当前所在的页数-1）5
   原因是 ：
   如果现在是第一页 ， 那我们获取的索引就是 （1-1）5 = 0， 也就是第一页的数据我们从索引为0的数据项开始截取
   如果现在是第二页 ， 那我们获取的索引就是 （2-1）5 = 0， 也就是第一页的数据我们从索引为5的数据项开始截取
   原因是 ： 开始的时候我们设定的每页条数是5 ， 那么从数组索引为5，也就是第6个数据开始截取作为第二页的第一个数据 ， 这样以此类推
   …
   截止到哪结束[索引]：当前所在页数5
   原因是 ：
   如果现在是第一页 ， 那我们获取的索引就是 15 = 5， 将作为我们截止到哪儿的结束索引 ， 因为数组的slice方法 ， 只是截止到截止到哪结束[索引]的前一个索引 ， 我们获取的是5 ， 那么实际上就是截取到了索引为 0 1 2 3 4 这五条数据作为第一页数据的展示数据用
   如果现在是第二页 ， 那我们获取的索引就是25 = 10 ， 也就是会截取到索引为 5 6 7 8 9的数据作为第二页的数据，这样以此类推
   …

3. 定时之展示
   定义定时器 ， 触发定时器的时候 ， 让所在当前页自动+1 ， 判断如果所在当页大于了总页面就重置为1，从第一页开始展示和获取数据即可

   接下来是完整代码 ， 你可以根据我的注解 ， 了解其中运行规则

data(){
  return{
      arr: [], // 需要分页的数据
      currentPage: 1, // 当前页数
      totalPage: 0, // 总页数 - 需要计算，每页显示5个
      timeId:0, // 定时器标识
  }
}，
mounted(){
    // 模拟数据
    this.arr = [
      { name: '1', id: '1' },
      { name: '2', id: '2' },
      { name: '3', id: '3' },
      { name: '4', id: '4' },
      { name: '5', id: '5' },
      { name: '6', id: '6' },
      { name: '7', id: '7' },
      { name: '8', id: '8' },
      { name: '9', id: '9' },
      { name: '10', id: '10' },
      { name: '11', id: '11' },
    ]
    // 开始执行函数和逻辑 - 打开控制台看运行数据即可
    this.totalData()； 
}，
methods：{
    // 获取总页数
    totalData() {
      // 总页数 = 数组长度和每页多少条取余 ， 如果余数是0 ， 代表正好 ， 如果不是0，就在总页数上+1 ， 即可得出总页数
      this.totalPage = this.arr.length % 5 == 0 ? parseInt(this.arr.length / 5) : parseInt(this.arr.length / 5 + 1);
      console.log('总页数',this.totalPage )
      // 调用定时器
      this.startInterval();
    },
    // 获取每页数据
    onePageData(){
      // 开始 - 第一页就是0，第二页就是5...10
       const start = (this.currentPage - 1)*5

      // 结束 - 当前页*5 - 截取到什么 第一页就是截取到5...10...15
      const end = this.currentPage*5
      // 截取到当页的需要渲染的数据
      const showData = this.arr.slice(start,end);

      console.log(start,end,showData)
    },

    // 封装定时器
    startInterval(){
      // 3秒一执行
      if(this.timeId){
        clearInterval(this.timeId)
      }
     
      this.timeId = setInterval(()=>{
        // 每次隔着时间都自定执行获取需要的每页数据 ， 放在这是为了第一次可以获取到
        this.onePageData();
        // 每次隔着时间执行都自动进行翻页
        this.currentPage++
        // 当前页数超过了总页数就恢复成第一页即可
        if(this.currentPage>this.totalPage){
          this.currentPage = 1;
        }
      },3000)

    },
}

如果你耐心看完了就自己写一写，分页其实可以很好的锻炼逻辑思维 ， 加油！