WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件があったので、自分で試してみたところ、いくつかの操作を行った後、ようやく解決できました。ここで、私の経験をまとめて皆さんと共有し、皆さんのお役に立てれば幸いです。

要件分析(これが完成した効果です)

具体的な日時と時間は次のとおりです。私に送られてきたバックエンドデータは次のようになります

startDate: "2021-08-27" //日付 年 月 日 startTime: "10:15" //開始時刻 endTime: "20:00" //終了時刻

実装コード

// 日付で並べ替える compareate: function (property) {
    // console.log(プロパティ); 
    関数(a, b)を返す{ 
    var value1 = Date.parse(new Date(a[property])); // 日付を取得するために16進数に変換します var value2 = Date.parse(new Date(b[property]));
    // console.log( 値1 - 値2 );
      return value1 - value2; //value1-value2 は小さい順から大きい順に、またその逆順に並べられます}
},

// 時間で並べ替える 時刻の形式は 10:00 なので、スライスを使用して文字列の最初の 2 桁をインターセプトし、時間の順序を時間ごとに比較します comparehour: function (property) {
  // console.log(プロパティ);
  関数(a, b)を返す{
    var value1 = a.startTime.slice(0,2) //slice(0,2) は比較のために文字列の最初の 2 桁を取得します var value2 = b.endTime.slice(0,2)
    // コンソール.log(値1-値2)
   value1 -value2 を返します //value1-value2 は小さい方から大きい方へ、またその逆順にソートされます}
},

  
MyTaskList:関数(){
    var それ=これ
    wx.リクエスト({
      url: 'リクエストインターフェース',
      データ: {
       //パラメータを入力},
      メソッド: "POST",
      ヘッダー: {
        'コンテンツタイプ': 'アプリケーション/json'
      },
      成功: 関数 (res) {
        // 時間で並べ替え if(res.data.list.orderDetailsList!=""){
          var dataListaaa=res.data.list.orderDetailsList;
          dataListaaa.forEach((item) => {
             var 開始時間 = アイテム.開始時間
              var 終了時間 =item.終了時間

    
          })
                      dataListaaa.sort(that.compareatime('starttime')); //上記の時間ソートメソッドを呼び出す}
        // 日付で並べ替え if(res.data.data=="success"){
          コンソールログ(res);
          if(res.data.list.orderDetailsList!=""){
            var dataList=res.data.list.orderDetailsList;
            dataList.forEach((item) => {
            //ループ後に時間形式を変換します var month=new Date(item.startDate.replace(/-/g,'/')).getMonth()+1;
              var day=new Date(item.startDate.replace(/-/g,'/')).getDate();
              var dateVal=month+'月'+day+'日'; // '月'と'日'を連結する
              項目['startDateFormat']=dateVal;
                // コンソールログ(日);
                
              // コンソールログ(dateVal);
            })
                         dataList.sort(that.comparedate('startDate')); //上記のcomparateと組み合わせたメソッドを使用して日付でソートします

         
  
  },

要約する

以上がWeChatミニプログラムを日時順に並べ替える全プロセスです。皆様のお役に立てれば幸いです。

この記事の内容をすべてご紹介させていただきましたので、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat アプレットのドラッグ アンド ドロップによる並べ替えリストのサンプル コード
  • WeChatアプレットが指ドラッグオプションの並べ替えを実装
  • WeChat アプレットのドラッグ アンド ドロップによる並べ替え (コード共有)

<<:  Ubuntu 20.04 aptの国内ソースを変更する方法

>>:  Ubuntu 20.04でAliソースを変更する方法

推薦する

MySQLクエリ最適化に必須の知識ポイントのまとめ

序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...

ウィンドウ内のさまざまな距離/スクロール距離の正確な計算の概要

通常、プロジェクト開発では、マージン、位置、座標などを扱う必要があります。悲劇なのは、これらの概念が...

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...

Linux のタイムドログ削除を実装する簡単な方法

導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...

32 典型的な列/グリッドベースのウェブサイト

列ベースの Web デザインのインスピレーションをお探しの場合は、32 個のクラシックな列/グリッド...

MySQLの文字セットを変更する方法

1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

HTTPプロトコルにおけるステータスコードの意味

暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...

nginx のロケーションで URI の傍受を実装する方法

例:場所のルートとエイリアスルートディレクティブは、ルートによって設定されたディレクトリに検索ルート...

ウェブデザインにおけるポップアップウィンドウとフローティングレイヤーのデザイン

従来のソフトウェアから Web ウェアへの段階的な移行の傾向の中で、デザイン パターンとテクノロジは...

JavaScriptの詳細な分析と方向の変更方法

目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...

Linux rpm および yum コマンドとその使用法の詳細な説明

RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...

Ubuntu 18.04 MySQL 8.0 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0のインストールと設定方法を参考までに紹介します。具体的な内容は以下の...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...

Web コンテンツ ページを作成するための 9 つの実用的なヒント

コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...