先上我的效果图,再说思路, 我这里不贴代码. 思路 懂了,不管用前端还是移动端,都可以做出来的.
做这个左后滑动的日历之前, 首先无从下手的 有两个地方. 第一: 该怎么实现 左右滑动效果, 第二: 展示的日期是怎么计算的.
因为我们是用ionic2 写的项目,所以滑动的问题 用<ionic-slide>完美的解决了 (里面包含的各种滑动监听事件都有.在这些监听事件中可以做对应的操作)
然后就是日期的展示计算,困惑了我好久,通过百度搜 也简直就是一个坑! 计算当前日期, 计算这个月多少天, 计算今天是星期几..........那么下个月呢?再这样计算一下? 妹的,在这个坑里还真是搞了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多天才跳出来...... 如果你只是无聊点开这个帖子的, 哈哈 ,我相信你也会被这复杂的逻辑给绕晕的. 毕竟无限轮播图原理谁都知道,但是每次自己去写的时候,会发现 !我的天呢,竟然是酱紫啊!!!哈哈
网友评论