范围式分页效果

需求：

需求1： 5列为一页，1列有5条数据，点击上下箭头按钮切换上下列（上下列替补式切换效果）
需求2： 5列为一页，1列有5条数据，点击上下箭头按钮切换刷5列新数据替换（5列重新替补切换效果）

效果：

分页效果1.png

分析需求1：

totalPages 总页数， pageNum页码数，0表示第一页; 每页头部列码数 [ 1 ~ 5 ], [ 2 ~ 6 ], [ 3 ~ 7 ] ……

处理每页头部的列码数

    let totalPages = 30
    let numList = [] // 存放起始数到截止数的之间的数组成一个数组
     let front = pageNum + 1 // 起始数
     let end = 0 // 截止数
     let  totalColumn = totalPages
     // 当第一页列数<=5列时, 截止数 = 总列数，否则当前页码数+5
     if (totalColumn <= 5) {
       end = totalColumn
     } else {
       end = pageNum + 5
     }
     for (let i = front; i <= end; i++) {
       numList.push(i)
     }

分析需求2：

totalPages 总页数， pageNum页码数，0表示第一页; 每页头部列码数 [ 1 ~ 5 ], [ 6 ~ 10 ], [ 11 ~ 15 ] ……

处理每页头部的列码数

    let totalPages = 30
     let columnNumList = [] // 存放起始数到截止数的之间的数组成一个数组
     let column = 5 // 列数
     let front = (column * pageNum) + 1 // 起始数
     let end = column * (pageNum + 1) // 截止数
     for (let i = front; i <= end; i++) {
       columnNumList.push(i)
     }

待更新中。。。。