vue自定义分页器

分页器需要的条件

  1. pageNo第几页
  2. pageSize每页展示多少条数据
  3. total一共展示多少条数据
  4. continues分页器连续的个数(比如分页器展示5条或者7条,一般是奇数,为了左右平均,对称好看)

计算 分页器的总页数:Math.ceil(this.total/this.pageSize)

computed:{
      totalPage(){
        // 向上取整 (总数据/每页显示的数据)
        return Math.ceil(this.total/this.pageSize);
      },
      startNumAndEenNum(){
        const {pageNo,totalPage,continues}=this;
        let end=0,start=0;
        // 总页数很少的情况下,连续页数大于总页数
        if(continues>totalPage){
          start=1;
          end=totalPage;
        }
        // 数据正常的情况下
        else{
          // 当前页数 减去 连续页数除2 ,比如5-2得到3,start是3
          start=pageNo-parseInt(continues/2);
          end=pageNo+parseInt(continues/2);
          // 如果start小于1会出现负数的情况
          if(start<1){
            start=1;
            // 结束值直接等于总页数
            end=continues
          }
          // 如果end的数超过了总页数
          if(end>totalPage){
            // 起始值为:总页-连续再+1,比如100页,start=100-5+1为96
            start=totalPage-continues+1;
            end=totalPage
          }
        }
        return {start,end};
      }
    }

动态展示部分:

html结构分为三部分,上 中 下。

<div class="pagination">
    <button>上一页</button>
    <button v-if="startNumAndEenNum.start>1">1</button>
    <button v-if="startNumAndEenNum.start>2">···</button>
    <!-- 将startNumAndEenNum.end的数据遍历,-->
      <!-- 为什么是end呢?因为start一般是1,而end是总数  -->
      <!-- 如何拿到自己要的数据?通过v-if处理,展示当前大于等于start的值, -->
      <!-- 比如6开始,则page>=6的展示 -->
    <button v-for="(page,index) in startNumAndEenNum.end"
            v-if="page>=startNumAndEenNum.start" :key="index">
      {{ page }}
    </button>
    
    <button v-if="startNumAndEenNum.end<totalPage-1">···</button>
    <!--end小于totalPage展示页才出现,如果大于或者等于就不展示 -->
    <button v-if="startNumAndEenNum.end<totalPage">{{ totalPage }}</button>
    <button>下一页</button>
    
    <button style="margin-left: 30px">页码:共 {{ totalPage }} 条</button>
  </div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值