Technologieaustausch

uniapp implementiert die Tabellensortierung

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Zeigen Sie die Liste in aufsteigender/absteigender Reihenfolge entsprechend der von der Backend-Schnittstelle übermittelten Nummer an.

Renderings, in absteigender Preisreihenfolge von hoch nach niedrig

Preise in aufsteigender Reihenfolge von niedrig nach hoch

Der Code für die absteigende aufsteigende Reihenfolge von js lautet wie folgt

  1. export default {
  2. data() {
  3. return {
  4. MtList:[]
  5. }
  6. },
  7. onLoad() {
  8. this.MtypeName();//加载列表方法
  9. },
  10. methods: {
  11. MtypeName(){//列表方法
  12. this.$api.getTypeNameUserID({
  13. ctime1:this.ctime3,
  14. ctime2:this.ctime4,
  15. }).then(res => {//allmoney 金额
  16. this.MtList = res.result.sort((a,b)=>b.allmoney-a.allmoney);//降序
  17. //this.MtList = res.result.sort((a,b)=>a.allmoney-b.allmoney);//升序
  18. })
  19. },
  20. }

WXML-Code

  1. <view class="typeClassDiv">
  2. <view class="typeListClass" v-for="(m,index) in MtList" @click="typeBut(m.typename,m.allmoney,m.bCount)">
  3. <image :src="m.typeLogo" class="tyLogo"></image>
  4. <view class="tyContent">
  5. <view class="tytop"><text class='typeNameClass'>{{m.typename}}</text><text class='typeMClass'>{{m.bfb}}%({{m.bCount}}笔)</text></view>
  6. <view class="tybottom">
  7. <view class="progress-box">
  8. <progress style="padding-top: 10px;padding-left: 2px;" :percent="m.bfb" stroke-width="3"/>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="tyFont">
  13. ¥{{m.allmoney}}
  14. </view>
  15. </view>
  16. </view>

Bitte beachten Sie die Seite zur täglichen Notizanalyse des Miniprogramms.