先上我的效果图,再说思路, 我这里不贴代码.  思路 懂了,不管用前端还是移动端,都可以做出来的.

做这个左后滑动的日历之前,  首先无从下手的 有两个地方.  第一: 该怎么实现 左右滑动效果,   第二: 展示的日期是怎么计算的.

因为我们是用ionic2 写的项目,所以滑动的问题 用完美的解决了   (里面包含的各种滑动监听事件都有.在这些监听事件中可以做对应的操作)

然后就是日期的展示计算,困惑了我好久,通过百度搜 也简直就是一个坑!    计算当前日期,  计算这个月多少天, 计算今天是星期几..........那么下个月呢?再这样计算一下?     妹的,在这个坑里还真是搞了3天,愣是没搞出来,因为仅仅封装的计算方法都封装了10个!     搞到最后自己都头晕了....然后赶紧去问同事,   然后一句话戳中了要点!    时间戳!!!!!!!!!!!!!!!!!!!!!!!  对 ,没错   就是时间戳!

时间戳这东西 我似乎都忘记了它的存在, 如果回想起他,我都能想起大学那会学的计算原理 计算机导论了......... 什么机器只识别 01 10啥的 ...哈哈 扯远了.

有了时间戳,机器是可以自动识别转换成当天是 几月几号星期几的!!(ionic2中有自动把时间戳转换成日期的管道(数据写成时间戳,展示的时候会自动换算成对应的日期格式的), 安卓,ios中也是有对应的处理方法的)

也就是说 不用你去计算 这个月有多少天,下个月有多少天,这周都是几号,今天是星期几,星期3的前2天是几号,后4天是几号等等..............时间戳的自动转换 一下就能搞定它.

下面说具体思路.

首先 我拿到今天的时间戳.  因为效果图上要显示的是一周的日期.  那么我根据今天的时间戳 ,封装了一个方法:   传入当前时间戳,计算当天是星期几, 然后返回给我一个数组, 数组里装了 这一周的时间戳 .然后展示到item上.

有了思路简单不? 封装的方法自己去写,也不难的.

下面来说左右滑动   注: ( 每天的时间戳是  24*3600*1000)

左滑动,是不是要显示下一周的日期.  那么你把  数组里面记录本周时间戳的7个值  每个都增加 24*3600*1000  *7  是不是就是下周的时间戳了?比如今天是星期一 , 7号. ,  那么7号 + 一周的时间戳,得到的是不是就是下周的星期一 是 14号 ?

那么你根据这个思路再去封装一个方法:  左滑动,根据当前选中时间戳,返回下一周时间戳的数组.

同理,右滑动,要显示上一周的时间戳,  你就要把数组中的所有时间戳都减去 24*3600*1000  *7.

这就是实现这个功能的思路!   初步思路有了就该针对效果进行优化了!

效果优化一:   左右滑动时 , 我们其实是要预先计算好 上周 和 下周的时间戳数组的.

当你滑动的时候,如果下周的时间戳还没计算出来, 这时候,你滑的时候,是不是机器还没计算好呢..你轻轻一滑,就会看到的是空白.      所以我们需要把本周,上周,下周的时间戳都给计算处理好. 滑动的同时,进行展示,  同时, 重点!!!!同时,  滑动的同时, 计算根据当前滑入的时间戳,  再计算好   上周, 下周的时间戳,备你下次滑动的时候展示.

懵逼了有木有!!!!!

简而言之 :  滑动的时候,需要触发的方法就是:    根据你当前当先显示的时间戳, 如果左滑,让这7个时间戳增加去一周, 如果右滑,让这7个时间戳减去一周.

效果优化二:  无限滚动!类似于无限轮播效果.

无非就是  (0 ,1, ,2)   三个页面  ,第  0个页面展示上周的时间戳, 第1个页面展示本周的时间戳,第2个页面展示下周的时间戳 ,

这里的处理方法与无限轮播图的原理是一样的(用3个页面实现无限轮播效果)...  如果做过轮播图的,你就应该有印象,,,如果没做过,我给你说下为啥要这么处理.....

当你左滑或者右滑  滑动结束的一瞬间,让它立即再返回到1 的页面.....

比如当你从1 左滑到了2的页面. 这时候立马让他滚动到 0. 同时刷新显示的数据

或者当你从1右滑到了0的页面,这时候立马让他滚回到 1 . 同时刷新显示的数据

因为动画效果设置成0秒.  所以闪的那一瞬间你是看不到的. 这个你可以放心的使用,是不会影响用户体验的

为什么要这么做?   你可以拿个笔在纸上画画 想想.......我们之前提到的  0界面显示的是上周的时间戳, 1界面显示的是本周的时间戳,2界面显示的是下周的时间戳.   滑动的时候我们调用了计算时间戳的方法..方法计算完了,所有的时间戳数值都改变了.同时你滑动也完成了,如果你左滑动了,这时候其实1界面显示的是下周的数据了,而2界面显示的是下下周的数据了,所以我们要瞬间要它赶紧滑动回1界面 才是正确的..  于此同时 不管怎么滑动,我们滑动结束的时候,让它永远都停留在角标为1的界面.   是不是也实现了 用3个页面实现无限轮播图的效果...

如果你也正在做这个功能,那么幸运的你用2天甚至更短的时间就能实现这个功能, 当初没思路 的我,在坑里10多天才跳出来...... 如果你只是无聊点开这个帖子的, 哈哈 ,我相信你也会被这复杂的逻辑给绕晕的. 毕竟无限轮播图原理谁都知道,但是每次自己去写的时候,会发现 !我的天呢,竟然是酱紫啊!!!哈哈

后续更新----------------------------------------------------

经过优化后，又实现了周视图 与 月视图的之间切换。整体思路也是一样的，只是涉及到二维数组中，前者存放的是7天的日期，后者存放的是整月的日期。不过需要注意，展开收起的时候日期的定位问题。

比如1号不是周日，如何用空格填充日历这类的逻辑。  有会议的日期高亮显示要注意放到异步操作中更新，不能影响日历的渲染等等，自己实现的时候一点点的完善就好了。

通常复杂的功能都是先从实现最最基本的功能开始，然后才一步步的去补漏洞，去完善它，不可能一下就能把所有的点都想全的。比如一个简单的功能，你用了50行的代码就实现了。但是为了完善它，最后你会发现写了500行都不足为怪。

同时支持了长按拖拽功能

满足拖拽到顶部、底部时列表自动滚动。拖拽的过程中，展示的时间跟随变动。

该看板列表的设计也挺有趣的，因为涉及到的计算比较多，所以找需求沟通，说看板的高度可否定义成1440px，也就是每个cell的高度是60px。 因为需求出的设计是没个cell为44px.   需求说为啥， 我说为了能保证准时交付这个功能0.0

哈哈 ，其实我的想法是 每1分钟代码1像素。  这样计算下来，就会很清晰，不会被这堆看似"繁琐"的计算以及小数点搞死，而且也不会产生差值。当然最后需求也是同意了。

其中主要分享的思路是拖拽到顶部、底部自动滚动的问题。

『模块的』长按事件: press

首先我们可以通过长按事件触发上图的那个蓝色模块显示。 定位就定在长按的 event.center.y + 长按模块高度/2、

全局touchmove的监听

滑动的过程中，根据    event.touches.clientY  <= 导航栏的高度    判断是否滚动到底部。

然后调用setInterval循环执行。   我这里写的是 每1毫秒执行一次， 循环执行的代码是

1. 获取当前List的滚动高度。 curretnScrollTop -=1;

this.content.scrollTop = curretnScrollTop;

对的 1毫秒执行一次。 整个滑动过程很流畅的。

同样的思路，通过

event.touches[0].clientY  >=  document.documentElement.clientHeight 判断是否滚动到底部。

然后调用setInterval循环执行。   我这里写的是 每1毫秒执行一次

curretnScrollTop +=1;

this.content.scrollTop = curretnScrollTop;

------------------------------------------------------

实现就是在touchMove中

if(向上滚动的条件判断){

}else if(向下滚动的条件判断){

}else{

// 处于两者中间

}

-----------------------------------------------------

全局touchend的监听    松开始，记得释放定时器 setInterval！！！！！！！，记录当前停留的时间，做对应的跳转操作。

等最近一阵忙完后，会把源码和详细的实现思路整理出来放在github上的，因为最近在考虑要换工作的事，这不们代码与业务还有点挂钩，不方便直接贴出来，待后续优化完，会把地址同步到该帖子上的。

同时恭喜Tonge移动开发交流群的朋友，通过我提供的思路整理成的文章和详细实现被某金平台置顶推荐，阅读量达6W+

不过呢，最好还是希望可以在有思路的情况下，自己动手去实现一遍，肯定比直接拿源码看的效果是要好很多的，对能力的提升也是会很有帮助的。