在驗(yàn)證方式中，比較簡單的一個(gè)是拖動(dòng)滑塊進(jìn)行驗(yàn)證，本文作者分享了滑塊拖動(dòng)驗(yàn)證碼的設(shè)計(jì)教程，一起來看一下吧。

之前作者發(fā)過一系列高保真驗(yàn)證碼的教程，本次帶來的是本系列的第5篇文章，分享滑塊拖動(dòng)驗(yàn)證碼的設(shè)計(jì)教程。

先看一下最終效果：

接下來分享這個(gè)驗(yàn)證碼的設(shè)計(jì)教程。

一、用到的元件

首先在畫布中拖入兩個(gè)動(dòng)態(tài)面板，分別命名為【滑塊】和【滑軌】，每個(gè)動(dòng)態(tài)面板中均有兩個(gè)狀態(tài)：【默認(rèn)】和【驗(yàn)證成功】。

以下是兩個(gè)動(dòng)態(tài)面板對應(yīng)的兩個(gè)狀態(tài)內(nèi)放置的內(nèi)容

然后把滑塊放在滑軌上方，跟滑軌左對齊，界面就畫完了。

二、用到的變量

全局變量中添加 Drag_Ver_Result，用來記錄驗(yàn)證的結(jié)果。

三、設(shè)計(jì)交互

首先給【滑塊】添加【拖動(dòng)時(shí)】交互，拖動(dòng)時(shí)，滑塊跟隨水平拖動(dòng)，同時(shí)以【滑軌】的左右邊界作為【滑塊】移動(dòng)的邊界，這樣滑塊就可以在滑軌內(nèi)左右拖動(dòng)。

接著再給【滑塊】添加【拖動(dòng)結(jié)束時(shí)】的交互，也就是拖動(dòng)滑塊松手之后的交互。這里需要判斷【滑塊】是否已經(jīng)拖動(dòng)到【滑軌】的最右側(cè)，如果是，表示驗(yàn)證成功，將兩個(gè)動(dòng)態(tài)面板都切換到【驗(yàn)證成功】的狀態(tài)，并將變量 Drag_Ver_Result 設(shè)置為 True；如果不是，則將【滑塊】移動(dòng)【回拖動(dòng)前位置】。

這樣，這個(gè)滑塊拖動(dòng)的驗(yàn)證碼就完成了，這是驗(yàn)證碼系列中做起來最簡單的一個(gè)。

其他驗(yàn)證碼教程回顧：

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（圖形驗(yàn)證篇）

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（數(shù)學(xué)運(yùn)算篇）

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（文字點(diǎn)選篇）

【Axure 教程】驗(yàn)證碼，除了 12306，我還沒有服過誰（滑動(dòng)拼圖篇）