摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此,時間選擇器的核心算法就已經基本掌握了。
寫在前面
之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說說它的成長史~
在閱讀本文之前,確保你有稍微看過 MultiPicker 的源碼 喔~
點擊查看源碼 ,也可以在 npm 上找到他們:
日期選擇器 - DateSelector - NPM.
自定義json選擇器 - MultiPicker. NPM.
四、日期選擇器 和 自定義 JSON 選擇器 的聯動差別 思考第5個問題:『如果說滑動手勢是它們之間的共同點,那它們之間又有什么區別?』回顧上上集:如何造一個移動端的聯動選擇器(一)
回顧上集:如何造一個移動端的聯動選擇器(二)
一個最明顯的區別就是,日期選擇器可以在多級之間反復調整,而自定義JSON 選擇器只能從高級聯動往下調整。
比如,在用日期選擇器選擇生日的時候。不小心操作失誤了,選擇成了1994-1-16
我想要修改年份為1995。當我滑動第一級聯動時,后面的聯動是不會改變的。
但是當我選擇城市的時候,如果我選擇了北京,下面的聯動等級一定會全部配合 “北京” 這個高級聯動,向下自適應改變。
選擇了廣東,下面的聯動等級也一定會全部配合 “廣東” 這個高級聯動,向下自適應改變。
所以為了區別這兩個不一樣的聯動場景,出現了兩套不一樣的聯動算法。
五、日期選擇器 的聯動算法 思考第6個問題:『如何協調用戶設置的時間點和實際時間點之間的聯系?』前面說到,用戶如果設置了【月日時分】這四個時間單位的話,他可能會輸入beginTime:[3,27,12,12], endTime 和 recentTime 也是類似。但是計算機如何快速識別這個開始時間,其實就是[2016, 3, 27, 12, 12] 呢?
如果把用戶設置的時間點稱為【虛擬時間】,而計算機能夠處理的完整時間點稱為【實際時間】,這個問題就簡化了許多。
我做了一個小技巧,就是在我判斷用戶參數合法性的同時,把用戶作為參數傳入的【虛擬時間】( 如 :beginTime、endTime、 recentTime),轉變成一個代碼能夠快速識別的【真實時間】(如:begin_time、end_time、 recent_time)。
另外,idxArr、maxHeight、distance 對應下標的值是和【虛擬時間】對應下標的值保持一致。
思考第7個問題:『如何計算聯動數據,才能做到在多級之間反復調整?』在我最新的重構算法中,我的解決方案是:
當ul被滑動時,就從最高級的聯動開始【遞歸調用】。被遞歸的函數叫做checkRange。
實現步驟如下:
① 每次touchend的時候,會先將當前滑動的結果保存,再調用checkRange(0);
② checkRange會根據你的參數,直接設置下一級聯動應該有的數據范圍:
③ 判斷好下一級的數據范圍后,需要判斷是否滑動到了開始時間(即最頂),或結束時間(即最底):
這里的loop是自己封裝的 for 循環,一定要理解這里的dir到底是如何計算的。
④ 判斷好dir的值之后,就需要對前面第②步生成的數據范圍進行調整:
如果滑到了開始時間的分界點,需要處理min的值;
如果滑到了結束時間的分界點,需要處理max的值;
處理好后,再調用 initRangeArr 更新dom。
⑤ 在initRangeArr中更新dom之后,需要配合數據,調整好 ul 的translate3d。通過一系列的計算,得到targetLong的值,用來設置translate3d。并且同步好所有控制結果的數據,不僅僅是更新recent_time、resultArr,還需要更新 maxHeight和 distance。
⑥ 然后遞歸調用checkRange;
PS:注意區分【虛擬時間】和【真實時間】的下標含義哦。
【虛擬時間】的下標是指,在界面上的每個ul的下標,比如有三個ul,那么就是 [0, 1, 2];
【真實時間】的下標是指,【0:年】【1:月】【2:日】.... 以此類推。
預知后話Github地址:『為移動端而生』的自定義多級聯動選擇器
到此,時間選擇器的核心算法就已經基本掌握了。
預知后話,后兩天見分曉
我是嘉寶Appian,一個賣萌出家的算法妹紙。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54382.html
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此,時間選擇器的核心算法就已經基本掌握了。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說說它的成長史~ 在閱讀本文之前,確保你有稍微看過 ...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此,時間選擇器的核心算法就已經基本掌握了。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說說它的成長史~ 在閱讀本文之前,確保你有稍微看過 ...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給,判斷如果還有則迭代,并計算深度。如果增加了聯動級數需要來判斷,則為新增加的聯動綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給,判斷如果還有則迭代,并計算深度。如果增加了聯動級數需要來判斷,則為新增加的聯動綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給,判斷如果還有則迭代,并計算深度。如果增加了聯動級數需要來判斷,則為新增加的聯動綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說...
閱讀 2953·2021-09-26 10:18
閱讀 5279·2021-09-22 15:02
閱讀 2796·2019-08-30 15:53
閱讀 1841·2019-08-29 18:41
閱讀 2692·2019-08-27 10:58
閱讀 2623·2019-08-26 13:49
閱讀 2750·2019-08-26 12:17
閱讀 901·2019-08-26 11:49