国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何造一個移動端的聯動選擇器(三)

since1986 / 2354人閱讀

摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此,時間選擇器的核心算法就已經基本掌握了。

寫在前面

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

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

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

日期選擇器 - DateSelector - NPM.

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

回顧上上集:如何造一個移動端的聯動選擇器(一)
回顧上集:如何造一個移動端的聯動選擇器(二)

四、日期選擇器 和 自定義 JSON 選擇器 的聯動差別 思考第5個問題:『如果說滑動手勢是它們之間的共同點,那它們之間又有什么區別?』

一個最明顯的區別就是,日期選擇器可以在多級之間反復調整,而自定義JSON 選擇器只能從高級聯動往下調整。

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

我想要修改年份為1995。當我滑動第一級聯動時,后面的聯動是不會改變的。

但是當我選擇城市的時候,如果我選擇了北京,下面的聯動等級一定會全部配合 “北京” 這個高級聯動,向下自適應改變。

選擇了廣東,下面的聯動等級也一定會全部配合 “廣東” 這個高級聯動,向下自適應改變。

所以為了區別這兩個不一樣的聯動場景,出現了兩套不一樣的聯動算法。

五、日期選擇器 的聯動算法 思考第6個問題:『如何協調用戶設置的時間點和實際時間點之間的聯系?』

前面說到,用戶如果設置了【月日時分】這四個時間單位的話,他可能會輸入beginTime:[3,27,12,12], endTime 和 recentTime 也是類似。但是計算機如何快速識別這個開始時間,其實就是[2016, 3, 27, 12, 12] 呢?

如果把用戶設置的時間點稱為【虛擬時間】,而計算機能夠處理的完整時間點稱為【實際時間】,這個問題就簡化了許多。

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

另外,idxArrmaxHeightdistance 對應下標的值是和【虛擬時間】對應下標的值保持一致。

思考第7個問題:『如何計算聯動數據,才能做到在多級之間反復調整?』

在我最新的重構算法中,我的解決方案是:

當ul被滑動時,就從最高級的聯動開始【遞歸調用】。被遞歸的函數叫做checkRange

實現步驟如下:

① 每次touchend的時候,會先將當前滑動的結果保存,再調用checkRange(0);

checkRange會根據你的參數,直接設置下一級聯動應該有的數據范圍:

③ 判斷好下一級的數據范圍后,需要判斷是否滑動到了開始時間(即最頂),或結束時間(即最底):

這里的loop是自己封裝的 for 循環,一定要理解這里的dir到底是如何計算的。

④ 判斷好dir的值之后,就需要對前面第②步生成的數據范圍進行調整:

如果滑到了開始時間的分界點,需要處理min的值;

如果滑到了結束時間的分界點,需要處理max的值;

處理好后,再調用 initRangeArr 更新dom。

⑤ 在initRangeArr中更新dom之后,需要配合數據,調整好 ul 的translate3d。通過一系列的計算,得到targetLong的值,用來設置translate3d。并且同步好所有控制結果的數據,不僅僅是更新recent_timeresultArr,還需要更新 maxHeightdistance

⑥ 然后遞歸調用checkRange

PS:注意區分【虛擬時間】【真實時間】的下標含義哦。

【虛擬時間】的下標是指,在界面上的每個ul的下標,比如有三個ul,那么就是 [0, 1, 2];

【真實時間】的下標是指,【0:年】【1:月】【2:日】.... 以此類推。

預知后話

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

到此,時間選擇器的核心算法就已經基本掌握了。

預知后話,后兩天見分曉

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

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

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

相關文章

  • 如何一個移動端的聯動選擇

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

    ls0609 評論0 收藏0
  • 如何一個移動端的聯動選擇

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

    zzzmh 評論0 收藏0
  • 如何一個移動端的聯動選擇(四)

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

    ssshooter 評論0 收藏0
  • 如何一個移動端的聯動選擇(四)

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

    cgspine 評論0 收藏0
  • 如何一個移動端的聯動選擇(四)

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

    leiyi 評論0 收藏0

發表評論

0條評論

since1986

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<