前端项目-07-search模块商品排序-自开发分页器

目录

1-商品排序​编辑

 2-分页组件

2.1-注册为全局组件

2.2-开发全局组件页码动态展示

2.3-点击页码按钮动态展示数据

---

1-商品排序

       商品列表需要按照一定规则进行排序，点击不同的地方商品排序方式不一样，所以我们开发动态排序和整理请求数据。

需求分析：进入搜索页面，我们默认按照综合降序(1:desc)查询，需要红色高亮(动态样式)表示选中的排序，当点击的还是高亮的时候，我们需要将降序改为升序；当我们点击不是高亮的时候，我们需要高亮显示价格的降序(2:desc)。

开发思路：首先搜索接口searchParams.order我们给出默认值：1:desc；然后我们判断如果是1表示综合，desc就是降序，asc就是升序，2就是价格...首先我们获取searchParams.order，判断如果分割字符串searchParams.order取第一项如果是1就高亮显示综合，2就高亮显示 价格；箭头上下要根据分割字符串searchParams.order取第二项如果是desc就是降序(箭头向下)。还有我们点击的如果是高亮的按钮，要改变箭头方向；如果不是高亮按钮，需要高亮我们选中的，并且默认箭头向下。

图标可以使用阿里图标库：
iconfont-阿里巴巴矢量图标库

:class="{active:isOne}" 动态样式：如果isOne是true就显示样式active；
<span v-show="isOne" class="iconfont" :class="{'icon-DOWN': isDesc, 'icon-UP': isAsc}"></span> 动态箭头样式：如果isOne是true就显示箭头上下样式；
@click="sort(1)"：点击事件:处理点击后各种不同的动态显示

 

 2-分页组件

2.1-注册为全局组件

分页功能在很多地方使用到，我们可以将分页组件注册为全局组件，这样注册一次，直接就可以使用。在src\components\pagination\index.vue新建静态页面，然后在main.js中注册为全局组件，在search组件中使用全局组件。

 

2.2-开发全局组件页码动态展示

因为数据量不多，先将pageSize改小一点，改成3，先看效果

 

全局分页组件需要参数：当前页pageNo，每页多少条记录pageSize，总记录数total，连续页码pagerCount；需要在search组件（父组件）传递到分页组件（子组件）中，分页组件（子组件）使用props属性来接受传递的值；接受过来值以后我们需要计算相关数据。
 

 

分页组件（子组件接受到相关数据后，需要动态计算相关信息），需要计算总页数，因为连续页码等参数，还需要进行其他的逻辑业务判断。

 

 

拿到数据后，需要动态展示页码相关信息 ，将页面分成上中下三部分，每块都需要相关逻辑判断...

上面部分：首先如果当前页是第一页，上一页的按钮需要disabled；如果开头页码大于1显示1，如果开头页码大于2显示...

中间部分：循环遍历开始页码和结束页码，v-for也可以遍历数字，点击选中的页码，需要动态给样式active

下面部分：需要进行判断判断...显示条件，还要disabled下一页按钮。

2.3-点击页码按钮动态展示数据

当点击分页组件（子组件）页码按钮时，需要将选中的页码传递给搜索组件（父组件）；这里又涉及到子父通信的问题，通过自定义事件来实现此功能。search组件接受到参数后，需要将searchParams.pageNo值设置为传递的参数，重新发起请求。