導讀：滑塊驗證是一種極驗類型，用于用戶登錄時人機識别。該方式相比較于圖形驗證碼、滑動拼圖驗證、點選驗證等驗證方式，操作成本較低。

一、要實現的效果

1、默認顯示滑塊、背景及提示文案。

2、滑塊僅允許向右水平拖動，切不能超過背景區域。

3、滑塊移動過程中，左側區域跟随變綠，右側區域保持默認顔色。

4、滑塊為未拖動到最右側時釋放，自動回到初始位置。

5、滑塊拖動到最右側時，無論是否釋放，自動觸發驗證并顯示加載狀态。

6、加載狀态持續500ms，而後顯示“驗證成功”。

7、驗證成功後滑塊不允許拖動。

二、實現思路

1、使用“拖動時”事件處理滑塊拖動過程、拖動結束的交互。注意：普通原件不能添加拖動事件，需使用動态面闆。

2、使用“拖動結束時”事件處理未拖動到最右側時釋放滑塊的交互。

3、通過判斷滑塊x坐标的位置判斷是否已拖動到最右側。需用到情形判斷及簡單的函數計算（若不考慮組件化，也可使用實際頁面中固定數值判斷）。

4、滑塊移動過程中左側區域跟随變綠的交互，可設置綠色背景的尺寸為滑塊x坐标與背景x坐标的差值。

實現思路要點如上，建議先根據該思路嘗試制作，而後再參考具體的步驟。

三、具體實現步驟

1、設置基礎元件。

元件包括滑塊、遮罩滑塊、加載動态、提示文字、bg-綠色、bg-灰色。

滑塊：拖動主體，需使用動态面闆。

遮罩滑塊：滑塊拖動到最後側後，顯示遮蓋滑塊在最頂層以屏蔽滑塊的拖動事件。

加載動态：加載過程常規動效，可使用其他樣式元素代替。

提示文字：用于顯示提示文案。

bg-綠色：默認width需小于滑塊，滑塊移動時改變width以跟随滑塊。

bg-灰色：默認背景，長度根據實際情況設置。

2、設置滑塊拖動事件。

事件邏輯：

• 滑塊拖動時，如果滑塊未拖動到最右側（判斷條件見圖1，省略掉的函數見圖2），則跟随水平拖動移動滑塊，移動範圍為【滑塊左側】大于等于【灰色背景x坐标】，【滑塊右側】小于等于【灰色背景x坐标 灰色背景width】。同時設置【綠色背景width】等于【滑塊x坐标-灰色背景x坐标】。
• 滑塊拖動時，如果滑塊拖動到最右側（因移動範圍已做限制，此處不需要專門寫判斷條件），交互見圖1。

圖1

圖2

3、設置滑塊拖動結束時的事件。

拖動結束時若未拖動到位，需設置滑塊回到拖動前位置，并設置綠色背景width為0（小于滑塊width的尺寸均可）。此處僅需設置未拖動到位的情景即可，判斷條件與“拖動時”事件的條件一樣。

四、其他

1、該組件盡量減少了元件的使用，盡量簡化了交互事件。

2、該組件在實際項目中拖入頁面即可使用，元件尺寸調整、整體位置移動均不影響交互。

如有更好的制作思路，歡迎指教！

本文由 @安行 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部