小程序--含有今天，明天，后天， 今天一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-<