先上我的效果圖,再說思路, 我這里不貼代碼. ?思路 懂了,不管用前端還是移動端,都可以做出來的.

做這個左后滑動的日歷之前, ?首先無從下手的 有兩個地方. ?第一: 該怎么實現 左右滑動效果, ? 第二: 展示的日期是怎么計算的.

因為我們是用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多天才跳出來...... 如果你只是無聊點開這個帖子的, 哈哈 ,我相信你也會被這復雜的邏輯給繞暈的. 畢竟無限輪播圖原理誰都知道,但是每次自己去寫的時候,會發現 !我的天呢,竟然是醬紫啊!!!哈哈

后續更新----------------------------------------------------

經過優化后，又實現了周視圖 與 月視圖的之間切換。整體思路也是一樣的，只是涉及到二維數組中，前者存放的是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+

不過呢，最好還是希望可以在有思路的情況下，自己動手去實現一遍，肯定比直接拿源碼看的效果是要好很多的，對能力的提升也是會很有幫助的。