成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

cgspine / 652人閱讀

摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。具體實(shí)現(xiàn)步驟如下先傳入一個(gè)需要計(jì)算深度的對(duì)象給，判斷如果還有則迭代，并計(jì)算深度。如果增加了聯(lián)動(dòng)級(jí)數(shù)需要來(lái)判斷，則為新增加的聯(lián)動(dòng)綁定新的事件。

寫在前面

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

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

點(diǎn)擊查看源碼 ，也可以在 npm 上找到他們：

日期選擇器 - DateSelector - NPM.

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

回顧上上上集：如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（一）
回顧上上集：如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（二）
回顧上集: 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）
六、自定義JSON選擇器 的聯(lián)動(dòng)算法 思考第8個(gè)問題：『如何確定下一級(jí)的聯(lián)動(dòng)級(jí)數(shù)呢？』

由于前面規(guī)范了自定義JSON的格式，所以，如果判斷下一級(jí)聯(lián)動(dòng)的級(jí)數(shù)問題，就轉(zhuǎn)化成為了【如何計(jì)算下一級(jí) child 的深度】問題。

我的解決方案是：迭代調(diào)用 checkArrDeep 來(lái)，就能判斷是否還有子聯(lián)動(dòng)，從而計(jì)算深度。

具體實(shí)現(xiàn)步驟如下：

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




② 生成所有子聯(lián)動(dòng)對(duì)應(yīng)的 li，并更新dom，同時(shí)把子聯(lián)動(dòng)的 translate3d 都設(shè)置成 (0, 0, 0);




這步和 日期選擇器 有著本質(zhì)的不同，這里的子聯(lián)動(dòng)一定會(huì)更新，并且所有子聯(lián)動(dòng)一定會(huì) translate3d(0 ,0 ,0)；


PS: 這里有一個(gè)小技巧，就是一定要記錄在更新聯(lián)動(dòng)之前的上一次聯(lián)動(dòng)的級(jí)數(shù)。我用 ulCount 來(lái)記錄上一次聯(lián)動(dòng)的級(jí)數(shù)，在完成所有更新操作之后，最后更新ulCount，以便下次迭代使用。


③ 如果增加了聯(lián)動(dòng)級(jí)數(shù)（需要ulCount來(lái)判斷），則為新增加的聯(lián)動(dòng) ul 綁定新的touch事件。如果減少了聯(lián)動(dòng)級(jí)數(shù)，則清除dom。


④ 重新設(shè)置聯(lián)動(dòng)的寬度，并同步更新所有計(jì)算聯(lián)動(dòng)會(huì)使用到的數(shù)據(jù)，包括ulCount：
七、用戶可以自定義callback 思考第9個(gè)問題：『如何確定用戶想要什么樣的數(shù)據(jù)格式呢？』

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

用戶可以在回調(diào)中 拼接自己想要的字符串 或 構(gòu)造后臺(tái)想要的json格式。很大程度上的增加了靈活度。

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

點(diǎn)擊開始了解 MultiPicker - 自定義多級(jí)聯(lián)動(dòng)選擇器

預(yù)知后話 
Github地址:『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器 


到此，這個(gè)選擇器的成長(zhǎng)史就結(jié)束啦~ 多謝觀看~


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

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

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

相關(guān)文章

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（四）

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

    ssshooter 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（四）

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

    leiyi 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）

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

    ls0609 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）

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

    zzzmh 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）

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

    since1986 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<