Vue项目中常见问题(29)排序操作完整版

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

重点业务需求:

思考:

根据下面的接口图我们分析:

order属性的属性值最多有多少种写法:

默认带的是1:desc

 步骤:

1.默认是综合降序排列 1:desc

 2.找到对应的排序的结构

业务2:

怎么区分综合和价格,从而添加类名active

 业务3:

谁应该有箭头

箭头用什么制作

1.找到想要的图标以后,我们点击复制代码

 2.引入图标

 3.使用图标库

 4.箭头上下的控制

实现点击切换效果

1.给综合和价格绑定点击事件

 2.思考业务

3.解决用户点击升序降序切换问题

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

重点业务需求:

我需要对这一块进行排序,升序降序排列,比如按照价格进行升序降序排列

思考:

升序降序不需要我们自己去计算,我们只需要把参数带给服务器,服务器进行计算以后就会把数据返回给我们

我们的接口中是有排序的参数order

根据下面的接口图我们分析:

1:代表综合排序 2:代表价格排序 

不管是何种排序,他们都是有asc:升序  和 desc:降序的

order属性的属性值最多有多少种写法:

1:asc

1:desc

2:asc

2:desc

所以也就四种情况

默认带的是1:desc

 步骤:

我们在pages/Search/index.vue中

1.默认是综合降序排列 1:desc

 2.找到对应的排序的结构

效果:

业务2:

怎么区分综合和价格,从而添加类名active

 我们知道li标签身上带有active这个类名的地方就是有背景颜色的,没有active的li就没有背景颜色

 区分的方法是:取决于我们参数中的order属性值当中包含的是1(综合) 还是2(价格)

<