中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、要實現的效果

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協議。