小程序--含有今天，明天，后天， 今天一10分钟为时间段显示当天剩余时间 的 时间组件

需求：
实现一个包含有：今天，明天，后天，时间的显示是以10分钟为一个时间段的，而且今天的只显示剩余的时间。
效果图：

思路：
1、因为只显示今天，明天和后天，不需要具体的日期，所以我就没有通过获取当前日期去推算，而是，直接将这三个值组为数组来使用；
2、通过for循环，在（0,24）和（0,59）之间组成小时和分钟的数组，但是这边需要的是十分钟的时间段，所以我就把分钟的数组处理为以10为单位的数字了，最后通过双重for循环来组成一天中所有符合要求的数组；
3、获取当前时间，通过判断当前的分钟所处的时间段，把该时间段和当前小时组成符合要求的一个值，在去判断改值在第二步中获得的数组的位置，通过数组截取便可以拿到今天的符合要求的数组了。
4.如此，拿到了所有要用的数据，剩下的就是渲染页面了
具体实现过程：
1.页面：

<view class="picker-wrap"> 
  <view class="time-title">预计送达时间</view>
  <view class="time-content">
    <view class="time-left">
      <view wx:for="{{date}}" wx:key="*this" data-index="{{index}}" data-item="{{item}}"
        class="{{dateIdx==index?'active':''}}" bindtap="toggleDate" data-current="{{index}}">{{item}}</view>
    </view>
    <view class="time-right">
      <swiper vertical="true" current="{{dateIdx}}">
        <swiper-item class="flex-wrap" >
          <scroll-view scroll-y class="scroll" wx:if="{{dateIdx==0}}" style="height:{{scrollHeight}}px">
            <view  wx:for='{{time}}' wx:key="index" data-item="{{item}}" bindtap="toggleTime" >
              <text class="{{index==timeIdx?'active':''}} flex-con">{{item}}</text>
              <image wx:if="{{index==timeIdx}}" src="/images/duihao.png" mode="aspectFill" class="flex-con"/>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="flex-wrap" >
          <scroll-view scroll-y class="scroll" wx:if="{{dateIdx==1}}" style="height:{{scrollHeight}}px" >
            <view wx:for='{{otherTime}}' wx:key="index" data-item="{{item}}" bindtap="toggleTime">
              <text class="{{index==timeIdx?'active':''}} flex-con">{{item}}</text>
              <image wx:if="{{index==timeIdx}}" src="/images/duihao.png" mode="aspectFill" class="flex-con"/>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="flex-wrap" >
          <scroll-view scroll-y class="scroll" wx:if="{{dateIdx==2}}" style="height:{{scrollHeight}}px">
            <view wx:for='{{otherTime}}' wx:key="index" data-item="{{item}}" bindtap="toggleTime">
              <text class="{{index==timeIdx?'active':''}} flex-con">{{item}}</text>
              <image wx:if="{{index==timeIdx}}" src="/images/duihao.png" mode="aspectFill" class="flex-con"/>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</view>

2.数据处理（主要部分）

   /*格式化分钟和小时*/
    withZero( params ){
      return params < 10 ? '0' + params : ''+params;
    },
    /*  数字循环*/
    getLoopArray(start, end){
      let array = [];
      start = start || 0;
      end = end || 1;

      for( let i = start; i<=end ; i++){
        array.push(this.withZero(i));
      }
        return array;
    },
    getNowTime(){
      let that = this;
      let date = new Date();
      let year = date.getFullYear();
      let month = (date.getMonth()+1 < 10 ? `0${date.getMonth()+1}` : date.getMonth()+1);
      let time = date.getDate()<10? `0${date.getDate()}` : date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      
      console.log(`${year}-${month}-${time} ${hour}:${minute}`)

      let arr= [],hourArr=[],lastTime=[]
      //获取符合要求的分钟时段
      let timeArr = this.getLoopArray(0, 59).filter(x=>{
        return x % 10 == 0;
      })
      console.log(timeArr)
       //获取一天当中符合要求的所有时间段
      for(let i=0;i< this.getLoopArray(0, 23).length;i++){
        for(let j=0;j<timeArr.length;j++){
          arr.push(`${this.getLoopArray(0, 23)[i]}:${timeArr[j]}`)
        }
      }
      // console.log(arr)
      // console.log(`${hour}:${minute}`)
      //根据当前分钟来判断当前所处的时间段
      let tempTime
      if(minute>0 && minute<10){
        tempTime = `${hour}:00`
      }else if(minute>=10 && minute<20){
        tempTime = `${hour}:10`
      }else if(minute>=20 && minute<30){
        tempTime = `${hour}:20`
      }else if(minute>=30 && minute<40){
        tempTime = `${hour}:30`
      }else if(minute>=40 && minute<50){
        tempTime = `${hour}:40`
      }else if(minute>=50 && minute<60){
        tempTime = `${hour}:50`
      }
      //获取今天剩余时间符合要求的时间段
      tempTime = arr.splice(arr.indexOf(tempTime)+1)
      lastTime= ['立即派送'].concat(tempTime)

      that.setData({
        time: lastTime,//今天的数据
        otherTime: arr//明天和后天的时间段数据
      })
    },
    toggleDate(e){
      console.log(e)
      let that = this
      if(that.data.dateIdx == e.currentTarget.dataset.index){
        return false
      }else{
        that.setData({
          dateIdx: e.currentTarget.dataset.index,
          currentDate: e.currentTarget.dataset.item
        })
      }
    },
    toggleTime(e){
      console.log(e)
      let that = this
      that.setData({
        timeIdx: e.currentTarget.dataset.index,
        currentTime: e.currentTarget.dataset.item,
        startTime: e.currentTarget.dataset.item
      })
      let parentTime = { date: that.data.currentDate,startTime: that.data.startTime};
      that.triggerEvent('myevent',parentTime) //myevent 自定义名称事件，父组件中使用
    },

注：若有好的想法和建议，欢迎留言！！！若有错误，望指正！！！