微信小程序排序功能实现 |
您所在的位置：网站首页 › 小程序排序助手怎么用 › 微信小程序排序功能实现 |
微信小程序排序功能实现
|
在日常生活中，我们有时在逛淘宝时，少不了从一堆东西中，根据不同选择重排数据，选择最心仪的东西。 效果图展示 （完整代码，直接拉到底） 二、实现点击事件功能；其次我们要思考怎么来实现这一功能，如何在点击的时候进行我们的动态改变？ 建议：在你获取事件时，先用console.log()打印一下，确保事件正确获取到。 a. 根据字段排序，在点击时传一个参数； b. 排序方法，sort()函数可以比较两个值，其中我调用了封装好的compare(property, bol)函数，传入了两个值，一个是表明依靠那个字段来排序，一个是boolean值根据传过来的值确定是正序还是倒序。(ps:这里也使用了时间比较，时间和分数比较方法一致，只是多了一步，要先将时间转化为时间戳。) html 按成绩排序 按时间排序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 },全部代码 按成绩排序 按时间排序 正序 倒序 序号 姓名 最高成绩 获得时间 {{index+1}} {{item.name}} {{item.grade}} {{item.time}} 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; } } }, } } $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; } } }因为是新手，若有用词不当，请提出立马修改。最后欢迎一起讨论，共同进步！ |
进入正题，实现思路：（以uni-app为例） （基础布置，结构搭建，样式添加等，这部分我就不过多阐述，可自主发挥） 一、布置点击事件；首先，我们要明白我们要点击那里触发点击事件？并如何实现随着点击事件的触发来实现改变自身样式，控制内容变化？ a. uni-app是基于vue的全端框架，点击事件使用@click(等同于v-on:click)触发； b. 自身样式使用了:class，动态更改样式，这里我用三目运算进行判断更改； c. 内容是使用v-for来遍历循环，所以既然是循环遍历，那么只要数据更改后遍历出来的就是已经更改的数据。 HTML 【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |