JavaScript写的分页器效果 | 青训营

118 阅读1分钟

### 话不多说上代码:

image.png

在分页器组件计算属性computed中计算连续页码【至少5页】的起始数字start、结束数字end【当前页pageNo在连续页码中】

情况判断一:连续的页码 > 总的页数 【start=1,end=总的页数】 情况判断二:连续的页码 < 总的页数 【计算 start = pageNo - parseInt(continues / 2)、end = pageNo + parseInt(continues / 2);】 分情况一:start数字出现0 | 负数 【continues=5,pageNo=1、2的时候】 分情况二:end数字大于总页码 【continues=5,totalPage=30,pageNo=29、30的时候】 记得:最后把 start、end返回

其实是一个比较简单的小案例吧,理清楚逻辑,就很好办。 这只是一个简单的示例,可以按照自己的需求进行修改和扩展,例如添加动画效果或自定义样式。希望这能对你有所帮助!