微信小程序之滑动日历展示

滑动日历效果

效果预览

实现要求：顶部固定悬浮的是获取未来一周的日期，分为上下两部分，上面部分显示星期，下面则显示具体日期。今天则显示今天，可点击头部具体日期，可向左向右滑动。

实现代码

顶部日历

页面部分的代码

       <view wx:for="{{dayList}}" wx:for-index="index" class="tab-item {{currentSwiper==index ?'active':'noactive'}}" wx:key="index" bindtap='changeTab' data-current="{{index}}">
          <view class="TimeOrderBox scroll-view-item bc_red {{id == index ? 'coloBack':''}}" id="{{index}}" data-selectTime="{{item.month}}/{{item.day}}" data-week="{{item.week}}">
            <view class="TimesWD">
              <text class="TimeOrderText" wx:if="{{NowDay==item.day}}">今天</text>
              <text class="TimeOrderText" wx:else>周{{item.week}}</text>
              <view class="TimeOrderDay">
                <text class="TimeOrderTextDay">{{item.day}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

这里我们用View标签 包裹起来，然后剩下的就是我们组装日期数据。我们来看js部分

 weekDate: function () {
    //获取周数据
    var myDate = new Date();// hehe
    myDate.toLocaleDateString();
    var month = myDate.getMonth() + 1;
    var time = myDate.getFullYear() + '年' + month + '月' + myDate.getDate() + '日';

    var total = 1;// 个数
    var dayList = [];
    dayList.push({
      'day': myDate.getDate(),
      'month': myDate.getMonth() + total,
      'week': toWeekDay(myDate.getDay()),
      'year': myDate.getFullYear()
    });
    for (var i = 0; i < 6; i++) {
      myDate.setDate(myDate.getDate() + total); // number 是最近几天  则会自动计算
      // 需求  月份-日   星期几
      dayList.push({
        'day': myDate.getDate(),
        'month': myDate.getMonth() + total,
        'week': toWeekDay(myDate.getDay()),
        'year': myDate.getFullYear()
      });
    }
    return dayList;
  }

function toWeekDay(weekDay) {// 传入数据  讲一周的某一天返回成中文状态下的字符
    switch (weekDay) {
        case 1: return '一'; break;
        case 2: return '二'; break;
        case 3: return '三'; break;
        case 4: return '四'; break;
        case 5: return '五'; break;
        case 6: return '六'; break;
        case 0: return '日'; break;
        default: break;
    }
    return '传入未知参数';
}

我们将一周的数据都封装进dayList中，然后返回。我们看下dayList返回了什么？

我们可以看到，通过上面js方法，我们得到了7条数据，分别有年、月、日以及星期几的数据。接下来我们看看css如何布局：

/* 循环周天样式 Start */
.tab-item{
  float: left;
  margin-left:20rpx;
  box-sizing: border-box; 
  /* background-color: #2E323B;
  margin-top: -7rpx; */
  position: relative;
  /* padding-top: 20rpx; */
  top:8rpx;
}

.pageTop{
  /* 100%; */
  height: 140rpx;
  background-color: #2E323B;
  padding-left: 40rpx;
  margin-top: -5rpx;
  position: fixed;
  top: 0;
  z-index: 99999;
  width: 100%;
}
.TimeOrder{width:1036rpx;height:106rpx;border-top:1px solid #eee;border-bottom:1px solid #eee;overflow-x: auto;}
/* .TimeOrderBox{148rpx;height:106rpx;border-right:1px solid #eee;text-align: center;line-height: 106rpx;} */

.coloBack{color:#003a70;border-bottom:2px solid #003a70}
.scroll-header{
display: flex;
white-space: nowrap;
background:#fff;

}
.scroll-header .TimeOrderBox{
height:120rpx;
width:100rpx;
/* border:1px solid #eee; */
display: inline-block;
/* font-size: 50rpx; */
/* background:#fff; */
}
.TimeOrderText{
left: 50rpx;
top: 170rpx;
width: 20rpx;
height: 12rpx;
line-height: 24rpx;
opacity: 0.5;
color: #787B81;
font-size: 10px;
text-align: center;
font-weight:400;
font-family: PingFangSC-Regular;
font-size: 20rpx;
/* margin-left: 10rpx; */
}

.TimeOrderTextDay{
  width:100%;
  height:60rpx;
  display: block;  
  /* opacity: 0.5; */
  line-height: 60rpx;
  flex-direction: column;
  margin-right: 0rpx;
  color: #96989D;
  font-size: 32rpx;
  text-align: left;
  font-family: CenturyGothic-Bold;
  font-weight:bold;
}


.TimeOrderBox{
  width:100%;
  height:137rpx;
}
.TimeOrderBoxCon{
  width:100%;
  height:127rpx;
  border-bottom: 1rpx solid #000;
}
.TimeDayBox{
  width:100%;
  height:auto;
}
.TimeDayBoxCon{}
.whatTime{width:175rpx;height:105rpx;font-size:26rpx;text-align: center;line-height: 105rpx;background:#fff;border-radius: 10rpx;margin-right:10rpx;margin-bottom:10rpx;color:#000;}
.whatTime1{width:175rpx;height:105rpx;font-size:26rpx;text-align: center;line-height: 105rpx;background:#003a70 !important;border-radius: 10rpx;margin-right:10rpx;margin-bottom:10rpx;color:#fff;}
.whatTime2{width:175rpx;height:105rpx;font-size:26rpx;text-align: center;line-height: 105rpx;background:#fdfdfd;border-radius: 10rpx;margin-right:10rpx;margin-bottom:10rpx;color:#dbdbdb;}
/* 选中时缩小字体 */
.narrowFontSize{
   font-size: 22rpx;
}
.selectTimeLeft{padding-left:12rpx;}
.SelectTimeBtn{width:100%;height:98rpx;line-height: 98rpx;text-align: center;color:#fff;position: fixed;bottom:0;background:#003a70;}
.SelectTimeBtnBox{width:100%;height:98rpx;background:#fff;}
.nowTime{
   background-color: #e4e4e4 ;
}
.TimesWD{
  width:80rpx;

}
.active .TimeOrderDay{
  margin-left:-10rpx;
  /* top: 250rpx; */
  width: 56rpx;
  height: 56rpx;
  background-color: #00AFD2;
  border-radius: 50%;
  padding: 5rpx;
  font-size:32rpx;
  font-family:CenturyGothic-Bold;
  font-weight:bold;
  color:#FFF;
  line-height:36rpx;
  text-align: center;
  /* margin-top:2rpx; */
}
.active   .TimeOrderTextDay{
  color:#fff;
  text-align: center;
  /* margin-left: 2rpx; */
}
.active  .TimeOrderText{
  color: rgba(255,255,255,1);
  font-family: CenturyGothic-Bold;
  text-align: center;
  font-size: 20rpx;
 

}
.noactive .TimeOrderTextDay{
  opacity: 0.5; 
  /* margin-left:0rpx; */
}
swiper {
   position: absolute;
   height: 100%;
   width: 100%;
}
scroll-view{
  height: 100%;
  overflow: scroll;
  background-color:#252830;
}
swiper-item{
  overflow: scroll;
}


/*循环周天样式  End*/

我们需要实现滑动效果，可以使用swiper组件。关于swiper的参数和用法，感兴趣的可以查下，我们快速讲下实现。

因为我们需要一些滑动展示不同的数据，这里我们mock一些 json数据仿照通过api返回过来的数据来解析：

{
  "isSuccess": true,
    "errorCode": 0,
      "errorMsg": null,
        "result": {
    "courseSeries": [
      {
        "date": "2018-12-24T00:00:00",
        "trainings": [
          {
            "id": 0,
            "duration": 90,
          
          },
          {
            "id": 0,
            "startTime": "2018-12-24T15:00:00",
            "duration": 60,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-24T16:00:00",
            "duration": 60,
            "total": 0,
            "bookedNumber": 0
          }
        ]
      },
      {
        "date": "2018-12-25T00:00:00",
        "trainings": [
          {
            "id": 0,
            "startTime": "2018-12-25T08:00:00",
            "duration": 120,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-25T08:00:00",
            "duration": 90,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-25T10:00:00",
            "duration": 90,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-25T12:00:00",
            "duration": 120,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-25T16:00:00",
            "duration": 120,
            "total": 0,
            "bookedNumber": 0
          }
        ]
      },
      {
        "date": "2018-12-26T00:00:00",
        "trainings": [
          {
            "id": 0,
            "startTime": "2018-12-26T08:00:00",
            "duration": 120,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-26T10:00:00",
            "duration": 120,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-26T14:00:00",
            "duration": 120,
            "total": 0,
            "bookedNumber": 0
          },
          {
            "id": 0,
            "startTime": "2018-12-26T16:00:00",
            "duration": 120,
            "total": 0,
            "bookedNumber": 0
          }
        ]
      },
      {
        "date": "2018-12-27T00:00:00",
        "trainings": []
       
      },
      {
        "date": "2018-12-28T00:00:00",
        "trainings": []
       
      },
      {
        "date": "2018-12-29T00:00:00",
        "trainings": []
       
      },
      {
        "date": "2018-12-30T00:00:00",
        "trainings": []
      }
    ]
  }

然后我们js中直接获取该Json数据。并解析成七条数据，因为我们显示的是一周数据

  onLoad: function () {
    let that=this;
    allList = [];
    that.filterday(mock.listData()["result"]["courseSeries"], that);
  },

 filterday: (res, options) => {
    let that = options;
    _.forEach(res, function (value) {
      that.coursesData(value, options);
    });
  },

  coursesData: (options, pargam) => {
    let that = pargam;
    if (options.trainings.length > 0) {
      let list = [];
      _.forEach(options.trainings, function (item, key) {
        list.push(item);
      });
      allList.push(list);
    } else {
      var objectData = {};
      allList = _.concat(allList, objectData);
    }
    let NowDay = new Date();
    console.log(that.weekDate());
    that.setData({
      dayList: that.weekDate(),
      dataShow: allList,
      NowDay: NowDay.getDate(),
    });
  },

其他需要注意的是滑动的时候有个滑动事件：switchSwiper，需要实现

 switchSwiper: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    });
  },

另外，我们需要点击，所以此处也有点击周数据的时候 点击事件：

changeTab: function (e) {
    console.log(e);
    this.setData({
      currentTab: e.currentTarget.dataset.current
    });
  },

最后我们的页面部分代码是： 

  <swiper circular="circular"  bindchange="switchSwiper" current="{{currentTab}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{dataShow}}" wx:key="index">
      <swiper-item>
       <view wx:if="{{dataShow[index].length>0}}">
         <view wx:for="{{dataShow[index]}}" wx:for-item="key" wx:key="index">
           <scroll-view scroll-y="{{true}}">
            <view class="contentBody">
               <text>
                {{key.duration}} -我是第{{index}}条数据
               </text>
             </view>
            <view class='heightView'></view>
           </scroll-view>
          </view>
        </view>
       <view wx:else><view class="contentBody"><text>暂无数据</text></view></view>
     </swiper-item>
   </block>
 </swiper>

这样的话，我们就可以展现出我们mock的一些数据

需要注意的是，上面当我们滑动的时候，我们是需要凸显当前所在的日期。

所以，在顶部周数据的时候，需要稍微做下处理。

 <view class="TimeOrderBox scroll-view-item bc_red {{id == index ? 'coloBack':''}}" id="{{index}}" data-selectTime="{{item.month}}/{{item.day}}" data-week="{{item.week}}">

这样基本上 就已经实现了整体代码，

源码Demo

 End