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

news2024/11/18 11:27:20

我们在业务之中，其实会常常用到一些数据的分段展示，比如数据量过大导致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' },
    ]

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

开发思路：

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

分页思路：

算出总页数：
总页数 = 数组长度和每页多少条取余，如果余为0，说明整除，直接返回（数组长度/每页条数），如果余不为0，就说明有一页不满足每页最大条数，我们返回（数组长度/每页条数+1）即可
相当于：
数组长度11
我设定每页条数5
那么就是余下1 ，余数不为0，直接就是（11/5+1）= 3 页，第三页展示的数据就是余下的那条数据
拿到每页数据
我们通过数组的 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的数据作为第二页的数据，这样以此类推
…
定时之展示
定义定时器，触发定时器的时候，让所在当前页自动+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)

    },
}