小程序--含有今天，明天，後天， 今天一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 自定義名稱事件，父組件中使用
    },

注：若有好的想法和建議，歡迎留言！！！若有錯誤，望指正！！！