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

一、要實現(xiàn)的效果

1、默認(rèn)顯示滑塊、背景及提示文案。

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

3、滑塊移動過程中，左側(cè)區(qū)域跟隨變綠，右側(cè)區(qū)域保持默認(rèn)顏色。

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

5、滑塊拖動到最右側(cè)時，無論是否釋放，自動觸發(fā)驗證并顯示加載狀態(tài)。

6、加載狀態(tài)持續(xù)500ms，而后顯示“驗證成功”。

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

二、實現(xiàn)思路

1、使用“拖動時”事件處理滑塊拖動過程、拖動結(jié)束的交互。注意：普通原件不能添加拖動事件，需使用動態(tài)面板。

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

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

4、滑塊移動過程中左側(cè)區(qū)域跟隨變綠的交互，可設(shè)置綠色背景的尺寸為滑塊x坐標(biāo)與背景x坐標(biāo)的差值。

實現(xiàn)思路要點如上，建議先根據(jù)該思路嘗試制作，而后再參考具體的步驟。

三、具體實現(xiàn)步驟

1、設(shè)置基礎(chǔ)元件。

元件包括滑塊、遮罩滑塊、加載動態(tài)、提示文字、bg-綠色、bg-灰色。

滑塊：拖動主體，需使用動態(tài)面板。

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

加載動態(tài)：加載過程常規(guī)動效，可使用其他樣式元素代替。

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

bg-綠色：默認(rèn)width需小于滑塊，滑塊移動時改變width以跟隨滑塊。

bg-灰色：默認(rèn)背景，長度根據(jù)實際情況設(shè)置。

2、設(shè)置滑塊拖動事件。

事件邏輯：

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

圖1

圖2

3、設(shè)置滑塊拖動結(jié)束時的事件。

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

四、其他

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

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

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

本文由 @安行 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。