标签：end 自定义 页数 start 起始值 组件 封装 页码

自定义封装分页器组件之前需要知道的数据:

1.当前的页码
2.总共多少条数据
3.每页展示多少条数据
4.连续页码数(5|7)
5.总页数

计算连续页码数的起始值和结束值

//通过计算属性来计算出来
computed:{
    startNumAndEndNum(){
      //首先先结构出我们需要的值(当前页码值，总页数，连续页码数)，这个值可以让父组件通过props进行传递
      let {pageNo,totalPage,continues} = this
      //给起始值和结束值赋初始变量
      let start = 0,end = 0;
      //判断当前总页数是否小于连续页码数
      if(totalPage<continues){
        start=1;end=totalPage;
     } else{
        //如果总页数大于连续页码数
        start = pageNo - parseInt(continues/2);
        end = pageNo + parseInt(continues/2);
        //还要判断起始值是否小于1
        if(start<1){
          start = 1;
          end = continues;
        }
        //判断结束值是否大于总页数
        if(end>totalPage){
          end = totalPage;
          start = totalPage - continues +1
        }
     }
      return {start,end}
   }
 }

剩下我们就可以遍历结束值，让遍历出来的值大于等于起始值显示，否则隐藏，这样连续页码数的值就有了，再根据其他接收到的值进行渲染页面就可以了

发送请求切换页面？

通过绑定自定义事件，通过传入当前的页码数发送请求，点击上一页，传入当前的页码数-1，点击下一页，传入当前的页码数+1，点击最后一页直接传入总页数

标签：end,自定义,页数,start,起始值,组件,封装,页码
来源： https://www.cnblogs.com/ljybg/p/jy.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。