需求:
需求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)
}
待更新中。。。。
网友评论