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 empfehlen

Einführung in den B-Tree-Einfügeprozess

Im vorherigen Artikel https://www.jb51.net/articl...

W3C Tutorial (7): W3C XSL Aktivitäten

Ein Stylesheet beschreibt, wie ein Dokument angez...

HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren

Einführung Kürzlich musste ich für einen großen A...

Spezifische Verwendung des MySQL-Parameters binlog_ignore_db

Vorwort: Nach dem Studium des vorherigen Artikels...

Die umfassendste Sammlung von Front-End-Interviewfragen

HTML und CSS 1. Verständnis und Kenntnisse von WE...

Detaillierte Schritte zur Entwicklung von WeChat-Miniprogrammen mit Typescript

Auf die Vorteile von Typescript müssen wir nicht ...

Vue realisiert Web-Online-Chat-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Erweiterte Verwendungsbeispiele für den Befehl mv in Linux

Vorwort Der Befehl mv ist die Abkürzung für move ...

Implementierungscode für mehrzeilige Textkomponenten der Vue-Faltanzeige

Faltdisplay mit mehrzeiligem Textbaustein Falten ...

Verwenden Sie h1-, h2- und h3-Tags angemessen

Beim Erstellen von Webseiten ist die Verwendung d...

js-Methode zur Realisierung der Warenkorbberechnung

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel für die Bereitstellung von MySQL 8.0 mit Docker

1. Informationen zur Installation von Docker find...