微信小程序排序功能实现

在日常生活中，我们有时在逛淘宝时，少不了从一堆东西中，根据不同选择重排数据，选择最心仪的东西。

---

效果图展示 （完整代码，直接拉到底）

进入正题，实现思路：（以uni-app为例）
（基础布置，结构搭建，样式添加等，这部分我就不过多阐述，可自主发挥）
一、布置点击事件；首先，我们要明白我们要点击那里触发点击事件？并如何实现随着点击事件的触发来实现改变自身样式，控制内容变化？
a. uni-app是基于vue的全端框架，点击事件使用@click(等同于v-on:click)触发；
b. 自身样式使用了:class，动态更改样式，这里我用三目运算进行判断更改；
c. 内容是使用v-for来遍历循环，所以既然是循环遍历，那么只要数据更改后遍历出来的就是已经更改的数据。
HTML

<view class="sort">
	<view class="sortPublic">
		<view class="sortSame" :class="select==1?'select':''" @click="sortSame">按成绩排序</view>
		<view class="sortSame" :class="select==2?'select':''" @click="sortTime">按时间排序</view>
	</view>
	<view class="sortOrder">
		<view class="positiveOrder" :class="selectOn==1?'selectOn':''" @click="positiveOrder">正序</view>
		<view class="reverseOrder" :class="selectOn==2?'selectOn':''" @click="reverseOrder">倒序</view>
	</view>
</view>
<view class="content">
	<view class="header sortContent">
		<view class="itemId itemHeader">序号</view>
		<view class="itemName itemHeader">姓名</view>
		<view class="itemGrade itemHeader">最高成绩</view>
		<view class="itemTime itemHeader">获得时间</view>
	</view>
	<view class="item sortContent" v-for="(item,index) of list" :key="index">
		<view class="itemId itemContent">{{index+1}}</view>
		<view class="itemName itemContent">{{item.name}}</view>
		<view class="itemGrade itemContent">{{item.grade}}</view>
		<view class="itemTime itemContent">{{item.time}}</view>
	</view>
</view>

二、实现点击事件功能；其次我们要思考怎么来实现这一功能，如何在点击的时候进行我们的动态改变？
建议：在你获取事件时，先用console.log()打印一下，确保事件正确获取到。
a. 根据字段排序，在点击时传一个参数；
b. 排序方法，sort()函数可以比较两个值，其中我调用了封装好的compare(property, bol)函数，传入了两个值，一个是表明依靠那个字段来排序，一个是boolean值根据传过来的值确定是正序还是倒序。(ps:这里也使用了时间比较，时间和分数比较方法一致，只是多了一步，要先将时间转化为时间戳。)
html

<view class="sortPublic">
		<view class="sortSame" :class="select==1?'select':''" @click="sortSame('grade')">按成绩排序</view>
		<view class="sortSame" :class="select==2?'select':''" @click="sortTime('time')">按时间排序</view>
	</view>

js

methods: {
	sortSame: function(e) {
		let property = e
		let newList = this.list.sort(this.compare(property, false))
		this.selectOn = 1
		this.list = newList
		this.property = property
		this.select = 1
	},
	sortTime: function(e) {
		let property = e
		let newList = this.list.sort(this.compare(property, false))
		this.selectOn = 1
		this.list = newList
		this.property = property
		this.select = 2
	},
	positiveOrder: function(e) {
		let property = this.property
		let newList = this.list.sort(this.compare(property, false))
		this.list = newList
		this.selectOn = 1
	},
	reverseOrder: function(e) {
		let property = this.property
		let newList = this.list.sort(this.compare(property, true))
		this.list = newList
		this.selectOn = 2
	},
	compare: function(property, bol) { //  排序
		return function(a, b) {
			if (property == 'grade') { //  判断为得分排序还是时间排序
				let value1 = a[property];
				let value2 = b[property];
			} else {
				let value1 = Date.parse(new Date(a[property])); //   将字符串格式的startTime转为Date格式，再转为时间戳
				let value2 = Date.parse(new Date(b[property]));
			}
			if (bol) {
				return value1 - value2;
			} else {
				return value2 - value1;
			}
		}
	},
}

三、数据初始化；页面加载后，你要给用户展示什么内容？
a. 颜色初始化，可在data()里面定义即可；
b. 数据内容初始化，首先数据内容也是需要在data()里面定义的，那你可能会想，那直接在这一步就把数据按着你想要显示的内容写不久好了吗？其实不然，如果数据多了，你不可能花费大量时间去改，所以最简单的方法，就是onLoad函数，在这里调用我们上面写得compare（）函数，在第二个参数传你想要正序还是倒序的Boolean就行了。
js

data() {
	return {
		property: 'grade', 
		selectOn: 1,
		select: 1,
		list: [{
			id: 1,
			name: "孟加",
			grade: 100,
			time: "2021-01-28"
		}, {
			id: 2,
			name: "孟减",
			grade: 93,
			time: "2020-11-27"
		}, {
			id: 3,
			name: "孟乘",
			grade: 98,
			time: "2020-09-05"
		}, {
			id: 4,
			name: "孟除",
			grade: 90,
			time: "2019-01-27"
		}],
	}
},
onLoad() {
	let newList = this.list.sort(this.compare(this.property, false))
	this.list = newList
},

全部代码

<template>
	<view>
		<view class="sort">
			<view class="sortPublic">
				<view class="sortSame" :class="select==1?'select':''" @click="sortSame('grade')">按成绩排序</view>
				<view class="sortSame" :class="select==2?'select':''" @click="sortTime('time')">按时间排序</view>
			</view>
			<view class="sortOrder">
				<view class="positiveOrder" :class="selectOn==1?'selectOn':''" @click="positiveOrder">正序</view>
				<view class="reverseOrder" :class="selectOn==2?'selectOn':''" @click="reverseOrder">倒序</view>
			</view>
		</view>
		<view class="content">
			<view class="header sortContent">
				<view class="itemId itemHeader">序号</view>
				<view class="itemName itemHeader">姓名</view>
				<view class="itemGrade itemHeader">最高成绩</view>
				<view class="itemTime itemHeader">获得时间</view>
			</view>
			<view class="item sortContent" v-for="(item,index) of list" :key="index">
				<view class="itemId itemContent">{{index+1}}</view>
				<view class="itemName itemContent">{{item.name}}</view>
				<view class="itemGrade itemContent">{{item.grade}}</view>
				<view class="itemTime itemContent">{{item.time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				property: 'grade',
				selectOn: 1,
				select: 1,
				list: [{
					id: 1,
					name: "孟加",
					grade: 100,
					time: "2021-01-28"
				}, {
					id: 2,
					name: "孟减",
					grade: 93,
					time: "2020-11-27"
				}, {
					id: 3,
					name: "孟乘",
					grade: 98,
					time: "2020-09-05"
				}, {
					id: 4,
					name: "孟除",
					grade: 90,
					time: "2019-01-27"
				}],
			}
		},
		onLoad() {
			let newList = this.list.sort(this.compare(this.property, false))
			this.list = newList
		},
		methods: {
			sortSame: function(e) {
				let property = e
				let newList = this.list.sort(this.compare(property, false))
				this.selectOn = 1
				this.list = newList
				this.property = property
				this.select = 1
			},
			sortTime: function(e) {
				let property = e
				let newList = this.list.sort(this.compare(property, false))
				this.selectOn = 1
				this.list = newList
				this.property = property
				this.select = 2
			},
			positiveOrder: function(e) {
				let property = this.property
				let newList = this.list.sort(this.compare(property, false))
				this.list = newList
				this.selectOn = 1
			},
			reverseOrder: function(e) {
				let property = this.property
				let newList = this.list.sort(this.compare(property, true))
				this.list = newList
				this.selectOn = 2
			},
			compare: function(property, bol) { //  排序
				return function(a, b) {
					if (property == 'grade') { //  判断为得分排序还是时间排序
						let value1 = a[property];
						let value2 = b[property];
					} else {
						let value1 = Date.parse(new Date(a[property])); //   将字符串格式的startTime转为Date格式，再转为时间戳
						let value2 = Date.parse(new Date(b[property]));
					}
					if (bol) {
						return value1 - value2;
					} else {
						return value2 - value1;
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color:#007AFF;

	.sort {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px rgba(0, 0, 0, .1) solid;

		.sortPublic {
			display: flex;
			justify-content: space-between;

			.sortSame {
				padding: 10upx 20upx;
				border-radius: 70upx;
				margin-left: 20upx;
				border: 1upx solid $color;
				color: $color;
			}

			.select {
				background-color: $color;
				color: #FFFFFF;
			}
		}

		.sortOrder {
			margin-right: 20upx;
			font-size: 20upx;


			.selectOn {
				color: $color;
			}
		}
	}

	.content {
		.sortContent {
			width: 90%;
			height: 50upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 5%;
		}

		.header {
			font-size: 26upx;
			margin-top: 20upx;
		}

		.item {
			border-bottom: 1upx solid rgba(0, 0, 0, .1);
			font-size: 22upx;
			font-weight: lighter;
		&:hover { 
			font-size: 26upx;
		}

		}

	}
</style>

因为是新手，若有用词不当，请提出立马修改。最后欢迎一起讨论，共同进步！