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

升序/降序

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'
		}
		//再次发送请求
	}
}
相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui