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

cgspine 發布于2019-08-22 10:46 / 627人閱讀

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

寫在前面

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

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

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

日期選擇器 - DateSelector - NPM.

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

回顧上上上集：如何造一個移動端的聯動選擇器（一）
回顧上上集：如何造一個移動端的聯動選擇器（二）
回顧上集: 如何造一個移動端的聯動選擇器（三）

六、自定義JSON選擇器的聯動算法 思考第8個問題：『如何確定下一級的聯動級數呢？』

由于前面規范了自定義JSON的格式，所以，如果判斷下一級聯動的級數問題，就轉化成為了【如何計算下一級 child 的深度】問題。

我的解決方案是：迭代調用 checkArrDeep 來，就能判斷是否還有子聯動，從而計算深度。

具體實現步驟如下：

① 先傳入一個需要計算深度的對象給 checkArrDeep，判斷如果還有child則迭代，并計算深度。

② 生成所有子聯動對應的 li，并更新dom，同時把子聯動的 translate3d 都設置成 (0, 0, 0);

這步和日期選擇器有著本質的不同，這里的子聯動一定會更新，并且所有子聯動一定會 translate3d(0 ,0 ,0)；

PS: 這里有一個小技巧，就是一定要記錄在更新聯動之前的上一次聯動的級數。我用 ulCount 來記錄上一次聯動的級數，在完成所有更新操作之后，最后更新ulCount，以便下次迭代使用。

③ 如果增加了聯動級數（需要ulCount來判斷），則為新增加的聯動 ul 綁定新的touch事件。如果減少了聯動級數，則清除dom。

④ 重新設置聯動的寬度，并同步更新所有計算聯動會使用到的數據，包括ulCount：

七、用戶可以自定義callback 思考第9個問題：『如何確定用戶想要什么樣的數據格式呢？』

最完美的解決方案，就是讓用戶自己寫callback，自己解決所有的數據格式問題。

用戶可以在回調中 拼接自己想要的字符串 或 構造后臺想要的json格式。很大程度上的增加了靈活度。

至此，『日期選擇器 - DateSelector』和『自定義json選擇器 - MulitiPicker』就算完成了。

點擊開始了解 MultiPicker - 自定義多級聯動選擇器

預知后話

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

到此，這個選擇器的成長史就結束啦~ 多謝觀看~

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

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

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

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

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

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

ssshooter 2019-08-30 13:12 評論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