乐优商场项目day13—页面分页效果
一、添加需要的数据
分页的话，我们需要知道总页数(totalPage)、总条数(total)、当前页(page),
所以我们先在data中记录这几个变量：
因为page是搜索条件之一，所以记录在search搜索对象中：
二、后台提供所需数据
我们后台中返回的PageResult对象里，其实是有这两个数据的：
我们只需要在返回时，将值填上：
重启搜索微服务，然后在页面测试一下看看：
三、编写页面显示效果
首先把后台提供的数据保存在data中：
先看一下要实现的分页效果：
这里面较难的是 1~5 的分页按钮，因为这五个按钮需要动态变化。
实现方法：
- 因为最多5个按钮，所以我们可以用v-for循环1-5；
- 但是分页条不一定是从1开始，要考虑以下几种情况：
（当前页指的是当前选中的页，比如上面那个分页效果图的当前页是1）
1.如果当前页值小于等于3的时候，分页条位置从1开始到5结束
2.如果总页数小于等于5的时候，分页条位置从1开始到总页数结束
3.如果当前页码大于3，应该从page-3开始
4.如果当前页码大于totalPage-3，应该从totalPage-5开始
页面实现：
刷新页面查看效果：
优化一下显示：
四、编写绑定点击效果
绑定单击事件：
编写单击事件：
这样就可以完成上下一页和点击页的效果了；
不过其实当page发生变化时，我们应该去后台重新查询数据。
但是如果我们直接发起ajax请求，那么浏览器的地址栏中是不会有变化，也就没有记录下分页信息。
那么当用户刷新页面，就又会回到第一页，用户体验不好。
所以我们应该把搜索条件记录在地址栏的查询参数中。
所以我们要监听search的变化，然后把search的过滤字段拼接在url路径后：
五、完成右上角的上下页
因为需要的数据和单击事件，前面都已经写好了。这里就很简单了:
分页就完成了。
欢迎大家交流与指正。
查看30道真题和解析
