之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯(lián)動選擇器，得到了很多人的關(guān)注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~
這一階段歪玲，你將會了解到頁面dom的實(shí)現(xiàn) 和 手勢算法的技巧。
在閱讀本文之前掷匠，確保你有稍微看過 MultiPicker 的源碼 喔~
點(diǎn)擊查看源碼 滥崩，也可以在** npm **上找到他們：
回顧上集：
四、日期選擇器 和 自定義 JSON 選擇器 的聯(lián)動差別
思考第5個問題：『如果說滑動手勢是它們之間的共同點(diǎn)讹语，那它們之間又有什么區(qū)別钙皮？』
一個最明顯的區(qū)別就是，日期選擇器可以在多級之間反復(fù)調(diào)整，而自定義JSON 選擇器只能從高級聯(lián)動往下調(diào)整株灸。
比如崇摄，在用日期選擇器選擇生日的時候。不小心操作失誤了慌烧，選擇成了1994-1-16
我想要修改年份為1995逐抑。當(dāng)我滑動第一級聯(lián)動時，后面的聯(lián)動是不會改變的屹蚊。
但是當(dāng)我選擇城市的時候厕氨，如果我選擇了北京，下面的聯(lián)動等級一定會全部配合 “北京” 這個高級聯(lián)動汹粤，向下自適應(yīng)改變命斧。
選擇了廣東，下面的聯(lián)動等級也一定會全部配合 “廣東” 這個高級聯(lián)動嘱兼，向下自適應(yīng)改變国葬。
所以為了區(qū)別這兩個不一樣的聯(lián)動場景，出現(xiàn)了兩套不一樣的聯(lián)動算法芹壕。
五汇四、日期選擇器 的聯(lián)動算法
思考第6個問題：『如何協(xié)調(diào)用戶設(shè)置的時間點(diǎn)和實(shí)際時間點(diǎn)之間的聯(lián)系？』
前面說到踢涌，用戶如果設(shè)置了【月日時分】這四個時間單位的話通孽，他可能會輸入beginTime：[3,27,12,12]， endTime 和 recentTime 也是類似睁壁。但是計算機(jī)如何快速識別這個開始時間背苦，其實(shí)就是[2016, 3, 27, 12, 12] 呢？
如果把用戶設(shè)置的時間點(diǎn)稱為【虛擬時間】潘明，而計算機(jī)能夠處理的完整時間點(diǎn)稱為【實(shí)際時間】行剂，這個問題就簡化了許多。
我做了一個小技巧钳降，就是在我判斷用戶參數(shù)合法性的同時硼讽，把用戶作為參數(shù)傳入的【虛擬時間】( 如 ：beginTime、endTime牲阁、 recentTime），轉(zhuǎn)變成一個代碼能夠快速識別的【真實(shí)時間】（如：begin_time壤躲、end_time城菊、 recent_time）。
另外碉克，idxArr凌唬、maxHeight、distance 對應(yīng)下標(biāo)的值是和【虛擬時間】對應(yīng)下標(biāo)的值保持一致漏麦。
思考第7個問題：『如何計算聯(lián)動數(shù)據(jù)客税，才能做到在多級之間反復(fù)調(diào)整况褪？』
在我最新的重構(gòu)算法中，我的解決方案是:
當(dāng)ul被滑動時更耻，就從最高級的聯(lián)動開始【遞歸調(diào)用】测垛。被遞歸的函數(shù)叫做checkRange。
實(shí)現(xiàn)步驟如下：
① 每次touchend的時候秧均，會先將當(dāng)前滑動的結(jié)果保存食侮，再調(diào)用checkRange(0);
② checkRange會根據(jù)你的參數(shù)，直接設(shè)置下一級聯(lián)動應(yīng)該有的數(shù)據(jù)范圍：
③ 判斷好下一級的數(shù)據(jù)范圍后目胡，需要判斷是否滑動到了開始時間(即最頂)锯七，或結(jié)束時間(即最底)：
這里的loop是自己封裝的 for 循環(huán)，一定要理解這里的dir到底是如何計算的誉己。
④ 判斷好dir的值之后眉尸，就需要對前面第②步生成的數(shù)據(jù)范圍進(jìn)行調(diào)整：
如果滑到了開始時間的分界點(diǎn)，需要處理min的值巨双；
如果滑到了結(jié)束時間的分界點(diǎn)噪猾，需要處理max的值；
處理好后炉峰，再調(diào)用 initRangeArr 更新dom畏妖。
⑤ 在initRangeArr中更新dom之后，需要配合數(shù)據(jù)疼阔，調(diào)整好 ul 的translate3d戒劫。通過一系列的計算，得到targetLong的值婆廊，用來設(shè)置translate3d迅细。并且同步好所有控制結(jié)果的數(shù)據(jù)，不僅僅是更新recent_time淘邻、resultArr茵典，還需要更新 maxHeight和 distance。
⑥ 然后遞歸調(diào)用checkRange宾舅；
PS：注意區(qū)分【虛擬時間】和【真實(shí)時間】的下標(biāo)含義哦统阿。
【虛擬時間】的下標(biāo)是指，在界面上的每個ul的下標(biāo)筹我，比如有三個ul扶平，那么就是 [0, 1, 2];
【真實(shí)時間】的下標(biāo)是指，【0：年】【1：月】【2：日】.... 以此類推蔬蕊。
六结澄、自定義JSON選擇器 的聯(lián)動算法
思考第8個問題：『如何確定下一級的聯(lián)動級數(shù)呢？』
由于前面規(guī)范了自定義JSON的格式，所以麻献，如果判斷下一級聯(lián)動的級數(shù)問題们妥，就轉(zhuǎn)化成為了【如何計算下一級 child 的深度】問題。
我的解決方案是：迭代調(diào)用 checkArrDeep 來勉吻，就能判斷是否還有子聯(lián)動监婶，從而計算深度。
具體實(shí)現(xiàn)步驟如下：
① 先傳入一個需要計算深度的對象給 checkArrDeep餐曼，判斷如果還有child則迭代压储，并計算深度。
② 生成所有子聯(lián)動對應(yīng)的 li源譬，并更新dom集惋，同時把子聯(lián)動的 translate3d 都設(shè)置成 (0, 0, 0);
這步和 日期選擇器 有著本質(zhì)的不同，這里的子聯(lián)動一定會更新踩娘，并且所有子聯(lián)動一定會 translate3d(0 ,0 ,0)刮刑；
PS: 這里有一個小技巧，就是一定要記錄在更新聯(lián)動之前的上一次聯(lián)動的級數(shù)养渴。我用
ulCount來記錄上一次聯(lián)動的級數(shù)雷绢，在完成所有更新操作之后，最后更新ulCount理卑，以便下次迭代使用翘紊。③ 如果增加了聯(lián)動級數(shù)（需要ulCount來判斷），則為新增加的聯(lián)動 ul 綁定新的touch事件藐唠。如果減少了聯(lián)動級數(shù)帆疟，則清除dom。
④ 重新設(shè)置聯(lián)動的寬度宇立，并同步更新所有計算聯(lián)動會使用到的數(shù)據(jù)踪宠，包括ulCount：
七、用戶可以自定義callback
思考第9個問題：『如何確定用戶想要什么樣的數(shù)據(jù)格式呢妈嘹？』
最完美的解決方案柳琢，就是讓用戶自己寫callback，自己解決所有的數(shù)據(jù)格式問題润脸。
用戶可以在回調(diào)中 拼接自己想要的字符串 或 構(gòu)造后臺想要的json格式柬脸。很大程度上的增加了靈活度。
至此毙驯， 『日期選擇器 - DateSelector』 和 『自定義json選擇器 - MulitiPicker』就算完成了倒堕。
寫在最后
Github地址:『為移動端而生』的自定義多級聯(lián)動選擇器
到此，DOM的實(shí)現(xiàn)和手勢操作已經(jīng)實(shí)現(xiàn)尔苦。
預(yù)知后話，后兩天見分曉
我是嘉寶Appian，一個賣萌出家的算法妹紙允坚。
