摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此,的操作和手勢算法就已經基本掌握了。
寫在前面
之前寫了一篇 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切換效果的完整版日期選擇器。其他場景中不會出現。
我發現,無論用戶使用哪個手指,只要用戶的滑動弧長在短時間內比較大的話,說明用戶比較想快速向上滑或是向下滑。比如,在選擇出生年份的時候,用戶肯定會想快速滑到上面的部分,就會用很快速的手勢向下滑動一個比較大的弧長。這時候就應該有一個滑動加速度的效果。
那么如何實現呢,如何判斷用戶想要快速滑動呢?
很簡單,只需要考慮,單位時間內的速度變化率,也就是加速度,就行了。
之前提到過,在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,一個賣萌出家的算法妹紙。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54383.html
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給,判斷如果還有則迭代,并計算深度。如果增加了聯動級數需要來判斷,則為新增加的聯動綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給,判斷如果還有則迭代,并計算深度。如果增加了聯動級數需要來判斷,則為新增加的聯動綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。具體實現步驟如下先傳入一個需要計算深度的對象給,判斷如果還有則迭代,并計算深度。如果增加了聯動級數需要來判斷,則為新增加的聯動綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此,的操作和手勢算法就已經基本掌握了。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說說它的成長史~ 在閱讀本文之前,確保你有稍微看過 Mu...
摘要:寫在前面之前寫了一篇為移動端而生的自定義多級聯動選擇器,得到了很多人的關注。預知后話地址為移動端而生的自定義多級聯動選擇器到此,的操作和手勢算法就已經基本掌握了。 寫在前面 之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器,得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇,所以寫了幾篇文章,來說說它的成長史~ 在閱讀本文之前,確保你有稍微看過 Mu...
閱讀 748·2021-10-14 09:43
閱讀 2072·2021-09-30 09:48
閱讀 3440·2021-09-08 09:45
閱讀 1089·2021-09-02 15:41
閱讀 1878·2021-08-26 14:15
閱讀 770·2021-08-03 14:04
閱讀 2972·2019-08-30 15:56
閱讀 3071·2019-08-30 15:52