WeChat-Applet implementiert Sortierfunktion basierend auf Datum und Uhrzeit

WeChat-Applet implementiert Sortierfunktion basierend auf Datum und Uhrzeit

Ich habe vor kurzem ein kleines Programmierprojekt übernommen und es bestand die Anforderung, die Liste nach Datum und Uhrzeit zu sortieren. Also habe ich mich daran versucht und nach einigem Herumprobieren habe ich es endlich herausgefunden. Hier möchte ich meine Erfahrungen zusammenfassen und mit Ihnen teilen, in der Hoffnung, dass sie Ihnen eine Hilfe sein werden.

Anforderungsanalyse (Dies ist das fertige Ergebnis)

Hier ist das genaue Datum und die genaue Uhrzeit sowie die genaue Stunde. Die an mich gesendeten Backend-Daten sind wie folgt

startDate: "2021-08-27" //Datum Jahr Monat Tag startTime: "10:15" //Startzeit endTime: "20:00" //Endzeit

Implementierungscode

// Nach Datum sortieren comparisonate: Funktion (Eigenschaft) {
    // console.log(Eigenschaft); 
    Rückgabefunktion (a, b) { 
    var value1 = Date.parse(new Date(a[property])); //In Hexadezimal umwandeln, um das Datum zu erhalten var value2 = Date.parse(new Date(b[property]));
    // console.log(Wert1 -Wert2);
      return value1 - value2; //value1-value2 werden von klein nach groß und umgekehrt sortiert}
},

// Nach Zeit sortieren Das Zeitformat ist 10:00, also verwenden wir slice, um die ersten beiden Ziffern des Strings abzufangen und die Reihenfolge der Zeit nach Stunde zu vergleichen comparehour: function (property) {
  // console.log(Eigenschaft);
  Rückgabefunktion (a, b) {
    var value1 = a.startTime.slice(0,2) //slice(0,2) holt die ersten beiden Ziffern des Strings zum Vergleich var value2 = b.endTime.slice(0,2)
    // console.log(Wert1-Wert2)
   return value1 -value2 //value1-value2 wird von klein nach groß und umgekehrt sortiert}
},

  
MeineAufgabenliste:Funktion(){
    var das=dies
    wx.Anfrage({
      url: 'Anforderungsschnittstelle',
      Daten: {
       //Parameter eingeben},
      Methode: "POST",
      Kopfzeile: {
        „Inhaltstyp“: „Anwendung/JSON“
      },
      Erfolg: Funktion (res) {
        // Nach Zeit sortieren if(res.data.list.orderDetailsList!=""){
          var dataListaaa=res.data.list.orderDetailsList;
          dataListaaa.forEach((item) => {
             var starttime=item.startTime
              var endtime =item.endTime

    
          })
                      dataListaaa.sort(that.compareatime('starttime')); //Rufen Sie die obige Zeitsortierungsmethode auf}
        // Nach Datum sortieren if(res.data.data=="success"){
          konsole.log(res);
          wenn(res.data.list.orderDetailsList!=""){
            var dataList=res.data.list.orderDetailsList;
            dataList.fürJeden((Element) => {
            //Konvertiere das Zeitformat nach der Schleife var month=new Date(item.startDate.replace(/-/g,'/')).getMonth()+1;
              var Tag = neues Datum (item.startDate.replace(/-/g,'/')).getDate();
              var dateVal=month+'月'+day+'日'; // '月' und '日' verketten
              Element['StartdatumFormat'] = Datumswert;
                // console.log(Tag);
                
              // konsole.log(Datumswert);
            })
                         dataList.sort(that.comparedate('startDate')); //Nach Datum sortieren mit der Methode in Kombination mit Compareate oben

         
  
  },

Zusammenfassen

Oben ist der gesamte Vorgang zum Sortieren von WeChat-Miniprogrammen nach Datum und Uhrzeit beschrieben. Ich hoffe, es ist für alle hilfreich.

Der gesamte Inhalt dieses Artikels wurde Ihnen vorgestellt und ich hoffe, dass Sie 123WORDPRESS.COM unterstützen werden.

Das könnte Sie auch interessieren:
  • Beispielcode für das Drag & Drop-Sortierlisten-Applet des WeChat-Applet
  • Das WeChat-Applet implementiert die Sortieroption per Ziehen mit dem Finger
  • Drag & Drop-Sortierung per WeChat-Applet (Codefreigabe)

<<:  So ändern Sie die inländische Quelle von Ubuntu 20.04 apt

>>:  So ändern Sie die Ali-Quelle in Ubuntu 20.04

Artikel    

Artikel empfehlen

CSS und JS für eine romantische Meteorschauer-Animation

1. Rendern 2. Quellcode HTML < Textkörper >...

Verwenden Sie js, um js-Funktionen in Iframe-Seiten aufzurufen

In letzter Zeit habe ich jeden Tag an meinen Absch...

URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben

Inhaltsverzeichnis Voraussetzungen Einrichten ein...

Einige grundlegende Anweisungen für Docker

Inhaltsverzeichnis Einige grundlegende Anweisunge...

XHTML-Einführungstutorial: Webseitenkopf und DTD

Obwohl Kopf und DTD nicht auf der Seite angezeigt...

So implementieren Sie Vue Page Jump

1. dies.$router.push() 1. Ansicht <Vorlage>...

So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat

Vorwort Ich habe zufällig entdeckt, dass die halb...

Detaillierter Prozessbericht der Vue2-Initiierungsanfragen mit Axios

Inhaltsverzeichnis Vorwort Axios-Installation und...