我们在业务之中，其实会常常用到一些数据的分段展示 ， 比如数据量过大导致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...10const start = (this.currentPage - 1)*5// 结束 - 当前页*5 - 截取到什么 第一页就是截取到5...10...15const 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)},
}

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