美文网首页
范围式分页效果

范围式分页效果

作者: 人生的旅行 | 来源:发表于2021-12-16 15:30 被阅读0次
需求:

需求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)
     }

待更新中。。。。

相关文章

  • 范围式分页效果

    需求: 需求1: 5列为一页,1列有5条数据,点击上下箭头按钮切换上下列(上下列替补式切换效果)需求2: 5列为一...

  • APP分页服务端设计

    1、传统Web式分页 web开发中常用的分页方式,根据页码进行分页。暂且称为Web式分页 根据页码pageInde...

  • 浅谈APP流式分页服务端设计

    1、传统Web式分页 web开发中常用的分页方式,根据页码进行分页。暂且称为Web式分页 根据页码pageInde...

  • 分页

    分页 效果

  • 一篇文章带你了解CSS 分页实例

    生活中分页的效果到处可见,今天教大家详细的分析一下分页效果。 如何使用 HTML 和 CSS 来创建分页? 如果你...

  • 分页效果

    制作时间:13:00 - 15:00 实现的效果图: 假设设置每5页切换一下,一共有10页。那先来分析一下: 如果...

  • 分页 导航栏 开班信息

    分页 效果 导航条1 效果 导航条2 效果 开班信息

  • 分页器(easy-ui)

    简单的分页效果。利用easy-ui的分页(pagination)效果图.png 页面结构: js结构: 主要用到e...

  • ScrollerView 分页浏览

    项目有这种Scrollerview分页效果,发现很多APP也有这种效果,第一页page分页效果在稍左边,第二页在中...

  • fmdb 分页查询

    所以做分页,就改变limit 里面的数字,就完美的做到了分页效果

网友评论

      本文标题:范围式分页效果

      本文链接:https://www.haomeiwen.com/subject/cdomfrtx.html