如何造一個移動端的聯動選擇器（三）

zzzmh 發布于2019-08-30 13:11 / 2216人閱讀

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，時間選擇器的核心算法就已經基本掌握了。

寫在前面

之前寫了一篇 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，一個賣萌出家的算法妹紙。

云服務器 GPU云服務器如何選擇一個好域名關于適配移動端的移動端的html js 移動端的表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115368.html

如何造一個移動端的聯動選擇器（三）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，時間選擇器的核心算法就已經基本掌握了。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 ...

ls0609 2019-08-02 15:56 評論0 收藏0
如何造一個移動端的聯動選擇器（三）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，時間選擇器的核心算法就已經基本掌握了。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 ...

since1986 2019-08-22 10:46 評論0 收藏0
如何造一個移動端的聯動選擇器（四）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給，判斷如果還有則迭代，并計算深度。如果增加了聯動級數需要來判斷，則為新增加的聯動綁定新的事件。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說...

ssshooter 2019-08-30 13:12 評論0 收藏0
如何造一個移動端的聯動選擇器（四）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給，判斷如果還有則迭代，并計算深度。如果增加了聯動級數需要來判斷，則為新增加的聯動綁定新的事件。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說...

cgspine 2019-08-22 10:46 評論0 收藏0
如何造一個移動端的聯動選擇器（四）

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給，判斷如果還有則迭代，并計算深度。如果增加了聯動級數需要來判斷，則為新增加的聯動綁定新的事件。寫在前面之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說...

leiyi 2019-08-01 16:03 評論0 收藏0