編輯導語：滾動抽獎在我們?nèi)粘：艹Ｒ?，但是很多人在Axure上可能就不知道如何實現(xiàn)這一功能。作者詳細分享了相關(guān)高保真滾動抽獎的步驟以及注意點,，幫助你更好地完成這一項目,，一起來看下吧。

看一下這次我們想要實現(xiàn)的效果：

看過效果之后我們再確認一下我們要實現(xiàn)的幾個功能：

1. 點擊“開始抽獎”,，在名單中隨機抽取一位中獎人,，并有閃爍切換的滾動效果。

2. 點擊“再抽一次”,，會開啟新一輪的抽獎,，并且不包含上一輪抽中的中獎人。

3. 全部人員都抽取完后,，可以點擊“重新開始”開啟新一輪的抽獎,，會重新將全部名單加載進來。

那么,，我們提煉一下幾個重點：

• 人員名單,，如何存放人員名單；

• 隨機，如何實現(xiàn)隨機抽??；

• 切換，如何實現(xiàn)在候選人之間閃爍切換,；

• 如何實現(xiàn)開始切換，以及停止切換（抽中候選人）,；

• 不包含,，如何排除上一輪已中獎名單。

如何存放人員名單：使用中繼器,，在頁面加載時,，添加一個動作添加行。

如何實現(xiàn)隨機抽?。?span style="color: rgb(101, 101, 101);">給每個人員一個隨機編碼,，然后進行排序，候選人的排序就被打亂了,，就可以做到隨機的效果,。

如何實現(xiàn)閃爍切換：中繼器設置分頁，一頁僅顯示一行信息,，那么只要實現(xiàn)一定時間后翻到下一頁就可以實現(xiàn)切換了,。

那么怎么實現(xiàn)循環(huán)切換呢？因為一般情況下頁面翻到最后一頁,，就會停止了,。那么我們就要在它翻到最后一頁的時候再添加一個動作，就是跳到第一頁,，這樣就可以從第一頁開始繼續(xù)往后翻頁了,。

如何實現(xiàn)開始抽獎和停止抽獎？

翻譯過來就是,，怎么讓中繼器不停翻頁,，并在想要的時候停下。

那么我們就要設置一個全局變量,，我給它命名為 StopOrStart,，它將會有兩種賦值就是start和stop。

當這個值不等于stop的時候,，中繼器就一直翻頁,。那就要考慮什么動作能一直出發(fā)翻頁。這個仿佛是一個公式一樣,，基本就是當狀態(tài)改變,，當文本改變時。正好我們中繼器里需要有姓名、手機號,，這兩樣就可以用文本框,，文本框就有當文本改變時的交互。

另外這里很好的一個點是不同的人可能有相同的姓名,，但手機號肯定不一樣,。所以我們在對顯示手機號的文本框上添加文本改變時的交互。翻譯一下就是,，當顯示手機號的文本框改變時,，只要全局變量StopOrStart不等于Stop，就不斷地翻頁,。

那么讓它停下來就簡單了,，就是讓全局變量在你需要的時候讓它變成是Stop就好了。我在這個原型中設置了過三秒全局變量等于Stop,，那么也可以是當點擊某個按鈕的時候全局變量等于Stop,，翻頁就停止了，那么當前頁就算是抽中的人選了,。

那么翻頁停止后,，又如何啟動抽獎呢？只要觸發(fā)某個動作時讓中繼器開始翻到下一頁,，文本框改變了,，就又會觸發(fā)不停翻頁了。

如何在下一輪抽獎的時候排除之前的中獎人員,。

再下一次抽獎之前,，將當前頁面的人員刪除。此時手機號碼的唯一性又派上用場了,，刪除中繼器中手機號碼等于當前文本框中的文本信息的行即可,。

以上就是本原型的核心邏輯啦。

本文由 @Eliza-三十 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,。

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