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

ivyzhang 發布于2019-08-30 13:11 / 1111人閱讀

摘要：寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器，得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此，的操作和手勢算法就已經基本掌握了。

寫在前面

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

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

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

日期選擇器 - DateSelector - NPM.

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

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

二、彈層的實現 & DOM的小技巧 思考第3個問題：『如何實現彈層，使得插件能夠兼容更多框架，并且樣式上萬無一失？』

實現彈層的思路：【插入DOM → 初始化聯動的數據 → 綁定事件】

① 在插入DOM的部分( initDomFuc )，采用字符串拼接的方式插入DOM（而不是使用字符串模板）。

聯動的主要結構式如下圖:

每個聯動是一個 div，div 包裹著一個 ul，ul 中的每個 li 就是聯動的值

其中div的高度是5個 li 的高度，ul的高度是實際的所有 li 的高度。

② 在初始化聯動數據的部分( initReady )，在頭尾分別插入兩個空字符，能夠起到占位符的作用，這樣在計算手勢的translate3d的時候更方便。

③ 為DOM元素綁定事件時，具體做法有兩步：

第一步：為每個初始化好的ul綁定touch事件( initReady )；

第二步：為一些操作按鈕綁定事件( initBinding )。

③ - 第一步：touch事件的種類無非就是 touchstart、touchmove 和 touchend。但需要在每次滑動的時候記錄一些數據。這是為了實現一個滑動加速度的效果，下文會說到。

③ - 第二步：用到了自己封裝的一個簡單的事件監聽函數on：

這個函數主要用在【觸發】【取消】和【提交】這幾個重要按鈕上。

PS：在設計樣式的過程中考慮到，完整使用【年月日時分】五種時間單位的場景居多，為了優化界面和用戶體驗，所以在日期選擇器的設計中，需要設計一種帶tab切換效果的完整版日期選擇器。其他場景中不會出現。

三、加速度的實現 思考第4個問題：『如何判斷滑動的手勢，讓滑動帶有加速度？』

我發現，無論用戶使用哪個手指，只要用戶的滑動弧長在短時間內比較大的話，說明用戶比較想快速向上滑或是向下滑。比如，在選擇出生年份的時候，用戶肯定會想快速滑到上面的部分，就會用很快速的手勢向下滑動一個比較大的弧長。這時候就應該有一個滑動加速度的效果。

那么如何實現呢，如何判斷用戶想要快速滑動呢？

很簡單，只需要考慮，單位時間內的速度變化率，也就是加速度，就行了。

之前提到過，在touchmove的過程中會有一個【speed數組】用來存儲滑動時，手勢的速度。

并在touchend中調用 initSpeed 函數，確定最后 transition-duration 的值。

initSpeed 的主要工作是計算 speed 中的速度方差，方差和加速度是成正相關的。

所以當方差大于0.1時，ul 的實際滑動距離是手勢滑動距離的兩倍，transition-duration的值為0.2s；

而當方差小于0.1的時候，就認為基本是勻速滑動，ul 的實際滑動距等于手勢滑動距離，取 speed[0] 作為 transition-duration 的值。

確定好了滑動距離之后，就可以計算最后停留的位置 translate3d ( initPosition )。

滑動加速度的效果就基本實現了。

預知后話

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

到此，dom的操作和手勢算法就已經基本掌握了。

預知后話，后兩天見分曉

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

GPU云服務器云服務器如何選擇一個好域名關于適配移動端的移動端的html 二三維聯動

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

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

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

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

ssshooter 2019-08-30 13:12 評論0 收藏0
如何造一個移動端的聯動選擇器（四）

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

cgspine 2019-08-22 10:46 評論0 收藏0
如何造一個移動端的聯動選擇器（四）

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

leiyi 2019-08-01 16:03 評論0 收藏0
如何造一個移動端的聯動選擇器（二）

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

leeon 2019-08-02 15:56 評論0 收藏0
如何造一個移動端的聯動選擇器（二）

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

wslongchen 2019-08-22 10:46 評論0 收藏0