滑动日历效果

效果预览

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

{
"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": []
}
]
}

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