在日常生活中，我们有时去淘宝，离不开从很多东西中根据不同的选择对数据进行排序，选择最贴心的东西。
效果图显示(完整代码，直接拖到最后) http://www.Sina.com/(以uni-app为例) ) ) ) ) ) ) )。
(基础布局、结构构建、添加样式等，这一部分我不多说，但可以自主发挥) )进入正题，实现思路：首先，我们必须了解点击那里会触发点击事件吗？ 另外，如何根据点击事件的触发情况改变自己的风格，实现对内容变化的控制？
a. uni-app是基于vue的全端框架，点击事件由@ click (等同于v-on : click )触发；
b .自己的风格使用了：class，动态地更改了风格。 在此通过第三轮运算判断并变更；
c .因为内容是使用v-for遍历环路，所以既然是环路遍历，如果数据发生更改，遍历的就是更改后的数据。
HTML
view class=' sort ' view class=' sort public ' view class=' sort same ' : class=' select==1？' select ' : ' ' ' @ click=' sort same '成绩顺序/viewviewclass=' sort same ' 3360 class=' select==2？' select ' : ' ' ' @ click=' sort time '时间顺序/view/view view class=' sort order ' view class=' positive order ' 3360 class ss ' selecton ' : ' ' ' @ click=' reverse order '逆序/view/view view class=' content ' view class=' headersortcortenter vier viewviewclass=' itemgradeitemheader '最高成绩/viewviewclass=' itemtimeitemheader ' viewviewclass=' itemsortcontent ' v-fofort 索引(of list (: key=(index ) viewclass=) itemiditemcontent ) {索引1 }/viewviewclass=) itemnameitemcontent viewviewclass=' itemgradeitemcontent ' { item.grade }/viewviewclass=' itemtimemeitemetetemclass
建议：获取事件时，请先在console.log ()中打印，以确保正确获取事件。
a .按字段排序，点击时传递参数；
b .排序方法。 sort ) )函数可以比较两个值。 其中，我调用了封装的比较(property，bol )函数，并传递了两个值。 一个值指示该字段是按顺序排序的，另一个值基于传递的值确定是按正序还是按反序排序。 (ps:这里也在使用时间比较。 时间和分数的比较方法一致，只是多了一步。 请先把时间转换成时间戳。 ）
html
view class=' sort public ' view class=' sort same ' : class=' select==1？' select ' : ' ' @ click=' sort same ' ' grade ' ) '成绩顺序/viewviewclass=' sort same ' 3360 class=' select==2？ ' select ' : ' ' ' @ click=' sort time ' ' time ' '时间顺序/view/view js
methods : (sort same : function ) e ) let property=elet new list=this.list.sort ) this.compare ) prop
erty, false))this.selectOn = 1this.list = newListthis.property = propertythis.select = 1},sortTime: function(e) {let property = elet newList = this.list.sort(this.compare(property, false))this.selectOn = 1this.list = newListthis.property = propertythis.select = 2},positiveOrder: function(e) {let property = this.propertylet newList = this.list.sort(this.compare(property, false))this.list = newListthis.selectOn = 1},reverseOrder: function(e) {let property = this.propertylet newList = this.list.sort(this.compare(property, true))this.list = newListthis.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
全部代码
<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: "kndls",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 = elet newList = this.list.sort(this.compare(property, false))this.selectOn = 1this.list = newListthis.property = propertythis.select = 1},sortTime: function(e) {let property = elet newList = this.list.sort(this.compare(property, false))this.selectOn = 1this.list = newListthis.property = propertythis.select = 2},positiveOrder: function(e) {let property = this.propertylet newList = this.list.sort(this.compare(property, false))this.list = newListthis.selectOn = 1},reverseOrder: function(e) {let property = this.propertylet newList = this.list.sort(this.compare(property, true))this.list = newListthis.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>因为是新手，若有用词不当，请提出立马修改。最后欢迎一起讨论，共同进步！