尚品汇前端项目学习笔记 项目进度 55%

1.排序功能：点击综合和价格，自由切换升序、降序

分别给综合和价格绑定click事件，点击调用函数changeOrder(flag),点击综合，flag=1;点击价格flag=2,函数体内创建order(当前order参数值)，orginFlag(原本点击的是综合还是价格)，orginOrder(原本是升序还是降序)，if条件判断当前点击是不是原来就已经高亮显示排序的，如果为真，则修改order的值。

this.searchParams.order=·${orginFlag}:${orginOrder=='desc'?'asc':'desc'}

如果当前点击的不是高亮显示的排序，则

this.searchParams.order=`${flag}:'desc'·;

最后修改当前的搜索参数，再次发送ajax请求。

2.分页器

1）分页器在页面中多次使用，所以注册为全局组件。

2)在入口文件处引入组件，创建全局组件。在分页器组件中，创建计算属性startNumandendNum()分情况讨论返回start和end两个属性值，在button按钮上使用v-for和v-if动态显示页码。使用props实现父子组件通信。在父组件中，给Pagination标签绑定自定义属性paginationInfo，为子组件添加props['pageNo','....']使用this.$emit触发监听事件，让父组件接受数据，改变pageNo属性，再次发送axios请求