分页组件模板结构
模板
js
思路分析：
1.准备参数
①总页数=总条数/每页显示条数 整体向上取整
②当前页码是由父组件传递的属性值，默认值为1
数据准备
2.动态计算页码列表------这里用到了计算属性computed
所有的判断条件是为了让中间按钮除了前两页和最后两页外，都是选中状态
①只显示5个页码、一个上一页按钮、一个下一页按钮
显示效果
总页码小于等于5的情况
这是总页码数小于5的情况
②总页码数大于5时，有三种情况
前五页正常显示，此时展示右边的省略号，如下：
pages>5的第一页分页效果
总页码大于5的情况并且是第一页数据
总页码大于5且是第一页的情况
最后五页的显示状态如下：
pages>5的最后一页效果
右侧临界值，让i从倒数第四页开始循环，页码小于等于总页码数，每次+1
右侧临界值
中间批次的页码永远都是中间页码被选中，前后都有省略号
中间状态
让i从当前页码的前两页开始循环，循环到当前页码的后两页
中间状态
3.控制上一页和下一页变化
给按钮绑定changePage事件，传入参数，如果参数为false，那么就是点击了上一页，true就是下一页，item就是页码
①点击上一页按钮
如果已经是第一页，那么就不能再点击上一页按钮，也就是要禁用上一页按钮，如图所示：
按钮禁用
点击上一页，参数为false，如果当前页码为1，直接return，如果大于1，那么就每点击一次让页码减一
上一页
②下一页按钮和上一页按钮同理
下一页
③如果是其它(页码)，那么就直接将参数赋值给当前页这个变量
④最终将变量通过自定义事件，传递给父组件，让父组件利用这个参数调用接口，重新发起请求获取数据并渲染页面。
网友评论