uniapp实现table排序

根据后端接口传来的数字大小对列表进行升序/降序展示

效果图,价格由高到低降序

价格由低到高 升序

js 降序升序代码如下

复制代码
	export default {
		data() {
			return {
                    MtList:[]
                    }
                },
        onLoad() {
			        this.MtypeName();//加载列表方法
		        },
		methods: {
                MtypeName(){//列表方法
				this.$api.getTypeNameUserID({
					 ctime1:this.ctime3,
					 ctime2:this.ctime4,
				}).then(res => {//allmoney 金额
				     this.MtList = res.result.sort((a,b)=>b.allmoney-a.allmoney);//降序
                     //this.MtList = res.result.sort((a,b)=>a.allmoney-b.allmoney);//升序
				})
			},
                   }

wxml 代码

复制代码
<view class="typeClassDiv">
	<view class="typeListClass" v-for="(m,index) in MtList" @click="typeBut(m.typename,m.allmoney,m.bCount)">
	 <image :src="m.typeLogo" class="tyLogo"></image>
	 <view class="tyContent">
			 <view class="tytop"><text class='typeNameClass'>{{m.typename}}</text><text class='typeMClass'>{{m.bfb}}%({{m.bCount}}笔)</text></view>
				 <view class="tybottom">
					 <view class="progress-box">
			    <progress style="padding-top: 10px;padding-left: 2px;" :percent="m.bfb" stroke-width="3"/>
			 </view>
		 </view>
			 </view>
		 <view class="tyFont">
		 	¥{{m.allmoney}}
		  </view>
	  </view>
</view>

小程序日常记一记 分析页面 可参考

相关推荐
moxiaoran575326 分钟前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
y东施效颦1 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
华子w9089258592 小时前
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
spring boot·微信小程序·uni-app
性野喜悲4 小时前
uniapp+<script setup lang=“ts“>解决有数据与暂无数据切换显示,有数据加载时暂无数据闪现(先加载空数据)问题
uni-app
假客套7 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
微信·uni-app·旅游
邹荣乐7 小时前
uni-app开发微信小程序的报错[渲染层错误]排查及解决
前端·微信小程序·uni-app
xw57 小时前
支付宝小程序外链跳转调试爬坑
uni-app·支付宝
^Rocky8 小时前
uniapp 对接腾讯云IM群组成员管理(增删改查)
uni-app·腾讯云
假客套9 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
前端·uni-app·旅游
程序员小张丶10 小时前
基于UniApp开发HarmonyOS 5.0鸿蒙汽车应用的指南
uni-app·汽车·harmonyos5.0