需求
【综合】初始值降序↓,【价格】初始值降序↓
点击【综合】/【价格】页签,每点击一次,顺序由↓变为↑
思路
1. 给li绑定一个动态的类active,判断何时加上去类。为什么要加这个active,一个是可以改变背景颜色,另一个是为了确定,我们正在点击哪一个页签。
接口文档定义了数据searchParams里的order:【1:综合;2:价格;asc:升序;desc:降序】
那么一共有四种排列方式 1:asc;1:desc;2:asc;2:desc
利用这个order属性,来判断我们正在点击哪一个页签。
this.searchParams.order.indexOf('1') != -1
//代表了我们正在点击序号1,也就是【综合】这个页签
包装成一个计算属性,方便我们使用
computed: {
isOne(){
return this.searchParams.order.indexOf('1') != -1
},
isTwo(){
return this.searchParams.order.indexOf('2') != -1
},
},
2.接下来我们要给页签旁边加一个箭头。这里采用了阿里的图标库: https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2758111
在静态文件夹public中的index.html引入
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2758111_9hehey1sgko.css">
以便可以使用在线icon素材
3.但是箭头不是随时都要出现的,而是随着我们点击哪一个页签,箭头就跟着显示出来。
可以使用v-show,控制的条件为isOne/isTwo
4.判断箭头是朝上还是朝下,业务逻辑为升降序。
思考怎么判断呢?asc和desc来作区分,那我们要拿到数据里面的order,来看下order里面有没有asc、desc,也是利用计算属性来包装成isAsc/isDesc
isAsc(){
return this.searchParams.order.indexOf('asc') != -1
},
isDesc(){
return this.searchParams.order.indexOf('desc') != -1
}
5.最后一个要思考:点击出效果。
给li绑定一个点击事件, 因为要区分点击的是哪一个页签,所以对于这个点击事件,要传参进去。
@click="changeOrder('1')"
changeOrder(flag){
//flag形参:它是一个标记,代表用户点击的是综合(1)价格(2) [用户点击的时候传递进来的]
if (flag) {
let orginOrder = this.searchParams.order;
// 这里获取到的是最开始的状态
let orginFlag = this.searchParams.order.split(':')[0];
let orginSort = this.searchParams.order.split(':')[1];
// 准备一个新的属性值
let newOrder = "";
if (flag == orginFlag) {
// 说明这里点的是综合
newOrder = `${orginFlag}:${orginSort == 'desc' ? 'asc':'desc'}`;
}else{
// 说明这里点的是价格
newOrder = `${flag}:${'desc'}`;
}
// 将newOrder赋予searchParams
this.searchParams.order = newOrder;
// 再次发送请求
this.getData();
}
},
现在我们可以拿到当前被点击页签的序号和升降序了,采用split(":")来分割他们。
先判断此时的页面,再在if语句中各自判断是升还是降序,借助三元表达式来判断,最后赋给一个临时的属性值newOrder。
此时的newOrder里面就包含了{序号:升降序},我们只要赋值给数据SearchParams的order,再发送请求即可。