手写分页器

前端三大件:轮播图、分页、日历。这属于前端开发常见三种业务！！

封装分页器组件的时候：需要知道哪些条件？

1:分页器组件需要知道我一共展示多少条数据 ----total【100条数据】

2:每一个需要展示几条数据------pageSize【每一页3条数据】

3:需要知道当前在第几页-------pageNo[当前在第几页]

4:需要知道连续页码数【起始数字、结束数字：连续页码数市场当中一般5、7、9】奇数，对称好看 continues

分析过程：

已知条件: total=【99】 pageSize =【3】 pageNo=6 continues 5

4 5 6 7 8

已知条件: total=【99】 pageSize =【3】 pageNo= 1 continues 5

错误:-1 0 1 2 3 正确: 1 2 3 4 5

已知条件: total=【99】 pageSize =【3】 pageNo= 2 continues 5

错误: 0 1 2 3 4 正确：1 2 3 4 5

已知条件: total=【99】 pageSize =【3】 pageNo= 33 continues 5

错误: 31 32 33 34 35 正确：29 30 31 32 33

已知条件: total=【99】 pageSize =【3】 pageNo= 32 continues 5

错误：30 31 32 33 34 正确: 29 30 31 32 33

<!-- 主要DOM结构 -->
<div class="pagination">
    <button 
        v-if="startNumAndendNum.start != 1"                   
        @click="$emit('getPageNo',pageNo - 1)"
    >上一页</button>
    <button 
        v-if="startNumAndendNum.start > 1"
        @click="$emit('getPageNo',1)" 
        :class="{active:pageNo==1}"
     >1</button>
    <button v-if="startNumAndendNum.start > 2">···</button>
    <!-- v-if不能和v-for一起使用 -->
    <button 
      v-for="(num,index) in startNumAndendNum.end" :key="index" 
      v-show="num >= startNumAndendNum.start"
      @click="$emit('getPageNo',num)"
      :class="{active:pageNo==num}">
      {{num}}</button>
​
    <button 
         v-if="startNumAndendNum.end <= this.pageTotal -       parseInt(this.continue / 2)"
    >···</button>
    <button 
         v-if="startNumAndendNum.end != this.pageTotal" 
         @click="$emit('getPageNo',pageTotal)"
    >{{pageTotal}}</button>
    <button 
         v-if="startNumAndendNum.end != this.pageTotal"  
         @click="$emit('getPageNo',pageNo + 1)"
         :class="{active:pageNo==pageTotal}"
    >下一页</button>
                                                                        
    <button style="margin-left: 30px">共 {{total}} 条</button>
  </div>
<script>
props:["pageNo","pageSize","total","continue"],
computed:{
    pageTotal(){
        return Math.ceil(this.total / this.pageSize);
    },
    //重点******
    startNumAndendNum(){
          //先定义两个变量存储起始数字与结束数字
          let start = 0;
          let end = 0;
          //连续页码数5【如果出现不正常现象，就是不够五页】
          if(this.continue > this.pageTotal){
            start = 1;
            end = this.pageTotal;
          }else{
            //正常现象
            start = this.pageNo - parseInt(this.continue / 2);
            end = this.pageNo + parseInt(this.continue / 2);
          }
          //把出现的不正常现象的起始数字与结束数字纠正
          if(start < 1){
            start = 1;;
            end = this.continue;
          }
          if(end > this.pageTotal){
            end = this.pageTotal;
            start = this.pageTotal - this.continue + 1
          }
          return {start,end}
        },
}
<script/>