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

Steve_Wang_ 發布于2019-08-02 15:56 / 1083人閱讀

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，需求已經明確。

寫在前面

之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~

在閱讀本文之前，確保你有稍微看過 MultiPicker 的源碼喔~

點擊查看源碼，也可以在 npm 上找到他們：

日期選擇器 - DateSelector - NPM.

自定義json選擇器 - MultiPicker. NPM.

一、確認需求 & 構造函數的參數設計

想做自定義多級聯動插件的最主要原因，當然還是因為在開發過程中頻繁的遇到。
并且對多級聯動的產品需求又是奇葩到不行，市面上的插件都滿足不了我們產品的需求。所以，我不得不動手自己造。

在造輪子之前，先思考一個問題：

第1個問題：『你都見過怎樣的多級聯動選擇器？』

比如 日期選擇器 、地區選擇器 、FAQ選擇器，或者 篩選條件選擇器。

我發現，日期選擇器和其他選擇器有著本質的不同。
日期選擇器可以通過系統函數計算得到，而其他選擇器可以統稱為需要自定義json的選擇器。

所以我開始著手打造這兩個選擇器：
『日期選擇器 - DateSelector』 & 『自定義json選擇器 - MulitiPicker』。

思考第2個問題：『參數要怎么靈活和高效地設置？』

1.我發現，使用『日期選擇器』有兩個非常迫切、刁鉆的需求：

①：需要【年】【月】【日】【時】【分】這五種時間單位進行排列組合；

②：需要時間范圍精確到分鐘。比如，有一個特賣產品需要限制時間可選范圍為【11月11日 - 11:11】開始，并于【12月12日 - 12:12 】結束。

在設置參數的時候考慮，可以使用一個數組來表示時間點，數組的每一位都對應一個時間單位。
并且，考慮到很多只需要 部分時間單位 的用戶的用戶體驗，所以需要一個參數確定用戶需要哪些時間單位，避免他們設置冗余時間單位帶來的麻煩。

參數	字符類型	取值	說明
param	{Array}	eg:[1,1,0,0,0]	設置單位，元素分別對應設置["year","month","day","hour","minute"],1為需要，0為不需要,需要為連續的1

比如，你只需要 【月日時分】這四個單位，你可以這樣設置beginTime:

參數	字符類型	取值	說明
param	{Array}	eg:[0, 1, 1, 1, 1]	設置單位，元素分別對應設置["year","month","day","hour","minute"],1為需要，0為不需要,需要為連續的1
beginTime	{Array}	eg:[3,27,12,12] 3月27日12點12分	設置開始時間點,空數組默認設置成1970年1月1日0時0分開始，數組的值對應param參數的對應值。

結束時間 endTime 和 recentTime 也是同理。

2.我發現，使用『自定義json選擇器』有一個非常迫切、刁鉆的需求：

①：用戶在自定義JSON的時候期望可以存在不同級別的聯動。

比如，地區選擇器中可能同時存在【北京 → 朝陽】這樣的二級聯動，也可能存在【廣東 → 深圳 → 福田區】這樣的三級聯動。

所以要設計一種JSON的格式規范，既能夠讓用戶更方便的表達自己想要的JSON，又能讓插件能夠順利讀到JSON深度，從而動態適應聯動。
經過考慮，認為最利落的JSON格式是對象數組，并且每個對象的屬性有以下幾個：

屬性	字符類型	說明
id	{String}	該級聯動的唯一標識
value	{String}	該級聯動顯示的內容
child	{Array}	該級聯動是否需要子聯動，如需要則繼續傳入數組，如不需要子聯動，則不用設置child這個屬性

其中，child屬性可以一直向下迭代，并不要求同一級聯動的各個對象要具有相同的子聯動。

預知后話

Github地址:『為移動端而生』的自定義多級聯動選擇器

到此，需求已經明確。

預知后話，后兩天見分曉

我是嘉寶Appian，一個賣萌出家的算法妹紙。

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

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

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

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

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給，判斷如果還有則迭代，并計算深度。如果增加了聯動級數需要來判斷，則為新增加的聯動綁定新的事件。寫在前面之前寫了一篇 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
如何造一個移動端的聯動選擇器（三）

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

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

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

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

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

since1986 2019-08-22 10:46 評論0 收藏0