如何造一個移動端的聯(lián)動選擇器（一）

Steve_Wang_ 發(fā)布于2019-08-02 15:56 / 1085人閱讀

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

寫在前面

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

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

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

日期選擇器 - DateSelector - NPM.

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

一、確認需求 & 構(gòu)造函數(shù)的參數(shù)設計

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

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

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

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

我發(fā)現(xiàn)，日期選擇器和其他選擇器有著本質(zhì)的不同。
日期選擇器可以通過系統(tǒng)函數(shù)計算得到，而其他選擇器可以統(tǒng)稱為需要自定義json的選擇器。

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

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

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

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

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

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

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

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

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

結(jié)束時間 endTime 和 recentTime 也是同理。

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

①：用戶在自定義JSON的時候期望可以存在不同級別的聯(lián)動。
比如，地區(qū)選擇器中可能同時存在【北京 → 朝陽】這樣的二級聯(lián)動，也可能存在【廣東 → 深圳 → 福田區(qū)】這樣的三級聯(lián)動。

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

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

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

預知后話

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

到此，需求已經(jīng)明確。

預知后話，后兩天見分曉

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54385.html

如何造一個移動端的聯(lián)動選擇器（四）

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

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

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

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

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

leiyi 2019-08-01 16:03 評論0 收藏0
如何造一個移動端的聯(lián)動選擇器（三）

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

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

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

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

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

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