08前端项目----升序/降序

升序/降序

- vue实现升序/降序
- 服务器处理

vue实现升序/降序

用vue实现升序/降序，以及css绘制三角形

js 复制代码

<div class="sui-navbar">
	<div class="navbar-inner filter">
		<ul class="sui-nav">
 			<li class="active">
                 <a href="#">综合</a>
            </li>
            <li>
            	<a href="#" @click="sortByPrice">价格
					<i class="angle_top" :class="{active: priceSort === true}"></i>
   					<i class="angle_bottom" :class="{active: priceSort === false}"></i>
				</a>
            </li>
        </ul>
	</div>
</div>

html 复制代码

<style>
.angle_top {
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 0 6px 6px;
    border-color: transparent transparent #5e5e5e;
    position: absolute;
    top: 10px;
    right: 17px;
}

.angle_bottom {
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #5e5e5e transparent transparent;
    position: absolute;
    bottom: 14px;
    right: 17px;
}
.angle_top.active, .angle_bottom.active {
  color: red; /* 高亮显示当前排序方向的箭头 */
}
</style>

searchList的goodsList里面有price，根据价格排序；初次点击是升序，再次点击就是降序

javascript 复制代码

data(){
	return{
		priceSort:null, //null:默认排序，true：升序；false:降序
	}
},
computed:{
	sortedGoodsList(){
		if(priceSort === null){
			return this.goodsList;
		}
		//在副本上修改数组，避免修改原始数据
		const sorted = [...this.goodsList];
		sorted.sort((a,b)=>{
			return this.priceSort?a.price-b.price:b.price-a.price;
		});
		return sorted;
	}
},
//点击价格按钮
merhods:{
	sortByPrice(){
		if(this.priceSort===null){
			this.priceSort = true;
		}else{
			this.priceSort = !this.priceSort;
		}
	}
}

javascript 复制代码

<li class="yui3-u-1-5" v-for="good in sortedGoodsList" :key="good.id">
  <div class="list-wrap">
    <div class="p-img">
      <a href="item.html" target="_blank"><img :src="good.defaultImg" /></a>
    </div>
    <div class="price">
      <strong><em>¥</em><i>{{good.price}}.00</i></strong>
    </div>
  </div>
</li>

服务器处理

实际开发当中有大量的数据，通过上面的方法消耗性能。而且通常情况下需要分页和全局排序，前端无法实现全局价格排序，应该后端处理然后向后端请求数据

数据实时性和准确性：后端实时动态变化数据和处理，可返回前端最新数据
性能优化：后端排序+分页返回，避免浏览器内存溢出与卡顿
确保数据安全性

这里我用的是阿里巴巴的图标，不是手写的

可以在阿里巴巴选择图标然后复制图标的代码

在public/index里面引入图标css样式即可
<link rel="stylesheet" href="https:这里就是图标的代码">

如下在项目中使用（图标的名字分别是icon-up和icon-down）

javascript 复制代码

  <li>
  	<a href="#" @click="sortByPrice">
  		价格
  		<span class="iconfont" :class="{'icon-up':isAsc,'icon-down':isDesc}"></span>
  	</a>
  </li>

计算属性：

后端请求回来的数据searchParams里面有order字段，order属性值为字符串例如'asc'、'desc'。只需要修改就行

javascript 复制代码

data(){
	return{
		order : null//刚开始为默认
	}
},

computed:{
	isAsc(){
		return this.searchParams.order.indexOf('asc')!==-1;
	},
	isDesc(){
		return this.searchParams.order.indexOf('desc')!==-1;
	},
}

点击价格触发函数

javascript 复制代码

methods:{
	sortByPrice(){
		if( this.searchParams.order === 'desc'){
			this.searchParams.order = 'asc'
		}else{
			this.searchParams.order = 'desc'
		}
		//再次发送请求
	}
}