微信小程序开发教程:根据日期和时间对列表内容排序
来源:绵阳动力网络公司  时间:2021-08-30  阅读:10

大家好,今天是2021年8月30日星期一,今明两天各学校和幼儿园都将陆续开学,神兽们将归位。这里说到时间的问题让我想到了前段时间做一个微信小程序项目开发时要对列表进行日期和时间的排序,于是经过测试和学习实现了这个功能,今天分享给大家。

首先我们来看最终的效果图:

微信小程序开发教程:根据日期和时间对列表内容排序的最终效果图

日期和时间参数是直接通过后端数据传输过来的:

startDate: "2021-08-27" //日期年月日
startTime: "10:15" //开始时间
endTime: "20:00"   //结束时间

接着是我们的核心代码:

//  根据日期排序
  comparedate: function (property) {
    // console.log(property); 
    return function (a, b) { 
    var value1 = Date.parse(new Date(a[property]));  //转换成十六进制获取日期
    var value2 = Date.parse(new Date(b[property]));
    // console.log( value1 -value2);
      return value1 - value2; //value1-value2是从小到大排序 反过来则是从大到小的排序
 
    }
},

// 根据时间排序 时间格式是10:00的个格式,所以我们用到slice进行截取字符串前两位,通过小时来进行比较时间的先后顺序
compareahour: function (property) {
  // console.log(property);
  return function (a, b) {
    var value1 = a.startTime.slice(0,2)  //slice(0,2) 获取字符串前两位进行比较
    var value2 = b.endTime.slice(0,2)
    // console.log(value1-value2)
   return value1 -value2 //value1-value2是从小到大排序 反过来则是从大到小的排序

  }
},

  
MyTaskList:function(){
    var that=this
    wx.request({
      url: '请求接口',
      data: {
       //放参数
      },
      method: "POST",
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        // 根据时间排序
        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')); //调用上面时间时间排序的方法
        }
        //根据日期排序
        if(res.data.data=="success"){
          console.log(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+'日'; //拼接‘月' 和‘日'
              item['startDateFormat']=dateVal;
                // console.log(day);
                
              // console.log(dateVal);
            })
                         dataList.sort(that.comparedate('startDate')); //根据日期排序使用的方法结合上面的comparedate
  
  },
好了,通过上方的这段代码就可以实现我们之前效果图中展示的样式了。希望今天的教程内容对你的微信小程序开发有所帮助,喜欢的话记得收藏哦!
 
  • 电话咨询

  • 0816-2318288