前端分页的实现

2023-10-12 12:54:04

前言

这两天写了一个个人项目-留言墙：一个以在线便利签的形式，也可以扩展成许愿墙、树洞的一个项目。上篇文章地址链接：留言墙

起先功能点很少，后面慢慢加入了一些留言总的建议性改造或者优化。比如：

增加字体和标题颜色
增加分页

那本文想说的就是这个前端分页：

实现效果：

在线预览地址

首先的问题是可以获取到全部数据的情况下，怎么实现分页
其实这个问题很简单，全部数据取到的情况下，那当然是点到哪个页面是显示那页的内容即可，只要展示对应内容即可。

正常简单分页

例子：有个数组[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]，数组长度为16，比如要每页5条数据，然后每页页就是[0,1,2,3,4]、[5,6,7,8,9]、[10,11,12,13,14]、[15]

实现如下：

function getPageDate(page){
   const arr1 = arr
   return arr1.slice((page-1)*5,page*5)
}

这个分页就是属于已经pageSize=5,然后总列表知道，简单的求第n页的数组数据

回归项目中的分页

已知的参数整理：

分页方面：当前页数currentPage,还有个多少数据为一页的pageSize
数据方面：首先我们有个全部数据的列表allLists,然后求展示的数组定义为showLists

根据上面已知的我们又可以知道一些额外的参数

allLists.length就是数据总条数
Math.ceil(allLists.length / pageSize)是总页数 Math.ceil是有小数向上取整,设置成totalPage

改进前分页

实现分页：

if(totalPage===1){
  // 只有一页的情况
  showLists=allLists
}else{
  // 不止一页的情况 获取当前页数据
  showLists = allLists.slice((currentPage-1)*pageSize,currentPage*pageSize)
}

然后展示获取到的showLists就行，由于项目中数据是按时间升序的返回，这样的话新增留言就只能点击末页才能看见，如果我是留言的人，肯定希望自己留了言就能看见，而不是去手动去末页找，说两个解决办法

最简单的就是返回是升序那我来个反转reverse()变成降序，那不是轻轻松松解决
切割数据的方法重新改进一下

那我在这当然是去说明一下第二种方法

if(totalPage===1){
  // 只有一页的情况
  showLists=allLists
}else{
  // 不止一页的情况 获取当前页数据
  showLists = allLists.slice(allLists.length-currentPage*pageSize,allLists.length-(currentPage-1)*pageSize)
}

如果你这样写，那就考虑不全了,因为计算最后一页的时候allLists.length-currentPage*pageSize可能是负数，所以需要改进一下，要么去考虑最后一页的情况，要么去判断这个allLists.length-currentPage*pageSize是否小于0

//修改 判断是否小于0
showLists = allLists.slice(allLists.length-currentPage*pageSize<0?0:showLists = allLists.slice(allLists.length-currentPage*pageSize,allLists.length-(currentPage-1)*pageSize),allLists.length-(currentPage-1)*pageSize)
//或者 直接考虑totlePage===currentPage(当前页是否等于总页数?)，为true就是最后一页

改进分页

到目前这样的思路去解决分页，到这也是我部署的第一版分页的情况，但是我自己用着用发现一个新问题，大于1页的时候，第一页是总是满的，因为我们取第一页数据的时候是取最后pageSize条数的数据，用户体验还不够好，显得页面比较乱，继续改进成先满足除了第一页的情况是满pageSize条，剩下的才放在第一条

if(totlePage===1){
// 只有一页的情况
  showLists=allLists }
else{
  // 不止一页当前 获取当前页数据
  showLists = allLists.slice((totlePage-currentPage)*pageSize,(totlePage-currentPage+1)*pageSize
}

这样实现的话为什么不考虑第一页的情况，其实这样的情况当为第一页是取(totlePage-1)*pageSize,totlePage*pageSize间的数据，比如总条数=16,pageSige=5,那可得totalPage=4，整个数组.slice(15,20)，也就是取15之后的所有数据(这里其实就一条)，
当然你要是不理解可以增加一个判断是否为第一页，为第一页的时候去取

showLists = allLists.slice((totlePage-currentPage)*pageSize,allLists.length)
// 也就是slice(15,16)而不是slice(15,20)

改进前后实现的效果

都是首页，页数大于1，数据条数一样，

改进前第一页展示最新30条数据，第二页展示剩余13条。
改进后第一页展示最新13条数据，第二页展示剩余30条。
但是展示效果我还是更喜欢改进后的：

留言条数计算

细心的你肯定发现了每条留言上方都有标注当前是第几条留言，简单说一下实现，首先肯定用计算属性去得到，然后根据是当前几页和在当前页数的留言序号去计算,参数v为当前页数的留言序号,我这里30为pageSize

改进前获取留言index

改进前的计算index比较复杂点，如果当前页是最后一页直接返回v，但是不是当前页需要使用总条数msgLength-pageSize*(totlaPage-currentPage)+v,这个公式解释一下就是：先计算除了当前页和小于当前页的条数pageSize*(totlaPage-currentPage),那总条数减去它就变成了大于当前页的总条数，也就是当前页序号的起点然后再加个序号，完美求得所需要的

 // 获取当前第几条留言
    getNumber(v){
      if (this.totlaPage === this.currentPage) {
        return v
      }else{
        return (this.msgLength-30*(this.totlaPage - this.currentPage) + v)
      }
    },

改进后获取留言index

改进后就简单多了，当前序号加上后面页数*页面条数30

    // 获取当前第几条留言
    getNumber(v){
       return 30*(this.totlaPage - this.currentPage) + v
    },

本文小结

上面所说的可能是偏理论+自己盲打的代码，没有去说明分页组件怎么用之类，偏理论，也是对留言墙的中前端分页的实现的简单说明，要是觉得不错，动动你的小手指！
熟能生巧(Practice make perfect!)。

码农公寓

前言