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

資訊專欄INFORMATION COLUMN

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

ls0609 / 3401人閱讀

摘要：寫在前面之前寫了一篇為移動(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ò) MultiPicker 的源碼 喔~

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

日期選擇器 - DateSelector - NPM.

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

回顧上上集：如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（一）
回顧上集：如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（二）
四、日期選擇器 和 自定義 JSON 選擇器 的聯(lián)動(dòng)差別 思考第5個(gè)問(wèn)題：『如果說(shuō)滑動(dòng)手勢(shì)是它們之間的共同點(diǎn)，那它們之間又有什么區(qū)別？』

一個(gè)最明顯的區(qū)別就是，日期選擇器可以在多級(jí)之間反復(fù)調(diào)整，而自定義JSON 選擇器只能從高級(jí)聯(lián)動(dòng)往下調(diào)整。

比如，在用日期選擇器選擇生日的時(shí)候。不小心操作失誤了，選擇成了1994-1-16




我想要修改年份為1995。當(dāng)我滑動(dòng)第一級(jí)聯(lián)動(dòng)時(shí)，后面的聯(lián)動(dòng)是不會(huì)改變的。






但是當(dāng)我選擇城市的時(shí)候，如果我選擇了北京，下面的聯(lián)動(dòng)等級(jí)一定會(huì)全部配合 “北京” 這個(gè)高級(jí)聯(lián)動(dòng)，向下自適應(yīng)改變。




選擇了廣東，下面的聯(lián)動(dòng)等級(jí)也一定會(huì)全部配合 “廣東” 這個(gè)高級(jí)聯(lián)動(dòng)，向下自適應(yīng)改變。

所以為了區(qū)別這兩個(gè)不一樣的聯(lián)動(dòng)場(chǎng)景，出現(xiàn)了兩套不一樣的聯(lián)動(dòng)算法。

五、日期選擇器 的聯(lián)動(dòng)算法 思考第6個(gè)問(wèn)題：『如何協(xié)調(diào)用戶設(shè)置的時(shí)間點(diǎn)和實(shí)際時(shí)間點(diǎn)之間的聯(lián)系？』

前面說(shuō)到，用戶如果設(shè)置了【月日時(shí)分】這四個(gè)時(shí)間單位的話，他可能會(huì)輸入beginTime：[3,27,12,12]， endTime 和 recentTime 也是類似。但是計(jì)算機(jī)如何快速識(shí)別這個(gè)開始時(shí)間，其實(shí)就是[2016, 3, 27, 12, 12] 呢？

如果把用戶設(shè)置的時(shí)間點(diǎn)稱為【虛擬時(shí)間】，而計(jì)算機(jī)能夠處理的完整時(shí)間點(diǎn)稱為【實(shí)際時(shí)間】，這個(gè)問(wèn)題就簡(jiǎn)化了許多。

我做了一個(gè)小技巧，就是在我判斷用戶參數(shù)合法性的同時(shí)，把用戶作為參數(shù)傳入的【虛擬時(shí)間】( 如 ：beginTime、endTime、 recentTime），轉(zhuǎn)變成一個(gè)代碼能夠快速識(shí)別的【真實(shí)時(shí)間】（如：begin_time、end_time、 recent_time）。

另外，idxArr、maxHeight、distance 對(duì)應(yīng)下標(biāo)的值是和【虛擬時(shí)間】對(duì)應(yīng)下標(biāo)的值保持一致。

思考第7個(gè)問(wèn)題：『如何計(jì)算聯(lián)動(dòng)數(shù)據(jù)，才能做到在多級(jí)之間反復(fù)調(diào)整？』

在我最新的重構(gòu)算法中，我的解決方案是:

當(dāng)ul被滑動(dòng)時(shí)，就從最高級(jí)的聯(lián)動(dòng)開始【遞歸調(diào)用】。被遞歸的函數(shù)叫做checkRange。

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

① 每次touchend的時(shí)候，會(huì)先將當(dāng)前滑動(dòng)的結(jié)果保存，再調(diào)用checkRange(0);


② checkRange會(huì)根據(jù)你的參數(shù)，直接設(shè)置下一級(jí)聯(lián)動(dòng)應(yīng)該有的數(shù)據(jù)范圍：




③ 判斷好下一級(jí)的數(shù)據(jù)范圍后，需要判斷是否滑動(dòng)到了開始時(shí)間(即最頂)，或結(jié)束時(shí)間(即最底)：




這里的loop是自己封裝的 for 循環(huán)，一定要理解這里的dir到底是如何計(jì)算的。


④ 判斷好dir的值之后，就需要對(duì)前面第②步生成的數(shù)據(jù)范圍進(jìn)行調(diào)整：




如果滑到了開始時(shí)間的分界點(diǎn)，需要處理min的值；


如果滑到了結(jié)束時(shí)間的分界點(diǎn)，需要處理max的值；


處理好后，再調(diào)用 initRangeArr 更新dom。 


⑤ 在initRangeArr中更新dom之后，需要配合數(shù)據(jù)，調(diào)整好 ul 的translate3d。通過(guò)一系列的計(jì)算，得到targetLong的值，用來(lái)設(shè)置translate3d。并且同步好所有控制結(jié)果的數(shù)據(jù)，不僅僅是更新recent_time、resultArr，還需要更新 maxHeight和 distance。




⑥ 然后遞歸調(diào)用checkRange；

PS：注意區(qū)分【虛擬時(shí)間】和【真實(shí)時(shí)間】的下標(biāo)含義哦。

【虛擬時(shí)間】的下標(biāo)是指，在界面上的每個(gè)ul的下標(biāo)，比如有三個(gè)ul，那么就是 [0, 1, 2];

【真實(shí)時(shí)間】的下標(biāo)是指，【0：年】【1：月】【2：日】.... 以此類推。

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


到此，時(shí)間選擇器的核心算法就已經(jīng)基本掌握了。


預(yù)知后話，后兩天見分曉


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

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

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

相關(guān)文章

  • 如何造一個(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

  • 如何造一個(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)注。具體實(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ō)...

    cgspine 評(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

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

0條評(píng)論

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