乐优商场项目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路径后：

 

五、完成右上角的上下页

因为需要的数据和单击事件，前面都已经写好了。这里就很简单了:

分页就完成了。

 

欢迎大家交流与指正。