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>

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

相关推荐
web_Hsir2 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa3 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘6 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界20 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨21 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆21 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0121 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app