<acronym id="p33pj"><strong id="p33pj"></strong></acronym>
  • <p id="p33pj"><strong id="p33pj"></strong></p>
    <track id="p33pj"></track><td id="p33pj"></td>
    <p id="p33pj"></p>
  • <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

      1. <p id="p33pj"></p>
        axure商城

        Axure教程:高保真滾動抽獎

        看一下這次我們想要實現的效果:

        小伙伴們可以點擊這個預覽鏈接,親手試試吧。
        (如果發現了啥BUG,還請麻煩悄悄的評論告訴我。)


        看過效果之后我們再確認一下我們要實現的幾個功能

        • 點擊“開始抽獎”,在名單中隨機抽取一位中獎人,并有閃爍切換的滾動效果。
        • 點擊“再抽一次”,會開啟新一輪的抽獎,并且不包含上一輪抽中的中獎人。
        • 全部人員都抽取完后,可以點擊“重新開始”開啟新一輪的抽獎,會重新將全部名單加載進來。

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

        1. 人員名單,如何存放人員名單;
        2. 隨機,如何實現隨機抽??;
        3. 切換,如何實現在候選人之間閃爍切換;
        4. 如何實現開始切換,以及停止切換(抽中候選人);
        5. 不包含,如何排除上一輪已中獎名單;

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

        如何實現隨機抽取
        給每個人員一個隨機編碼,然后進行排序,候選人的排序就被打亂了,就可以做到隨機的效果。

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

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

        如何實現開始抽獎和停止抽獎
        翻譯過來就是,怎么讓中繼器不停翻頁,并在想要的時候停下。
        那么我們就要設置一個全局變量,我給它命名為 StopOrStart,它將會有兩種賦值就是start和stop。
        當這個值不等于stop的時候,中繼器就一直翻頁。那就要考慮什么動作能一直出發翻頁。這個仿佛是一個公式一樣,基本就是當狀態改變,當文本改變時。正好我們中繼器里需要有姓名、手機號,這兩樣就可以用文本框,文本框就有當文本改變時的交互。另外這里很好的一個點是不同的人可能有相同的姓名,但手機號肯定不一樣。所以我們在對顯示手機號的文本框上添加文本改變時的交互。翻譯一下就是,當顯示手機號的文本框改變時,只要全局變量StopOrStart不等于Stop,就不斷地翻頁。

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

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

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


        以上就是本原型的核心邏輯啦,需要下載原型的小伙伴可以點擊這個預覽鏈接查看下載鏈接。

        給TA打賞
        共{{data.count}}人
        人已打賞
        基礎教程

        Axure文本框功能使用詳解

        2021-8-19 16:11:51

        基礎教程

        用Axure動態面板制作簡易抽獎小程序

        2021-12-21 11:25:16

        axure商城
        9 條回復 A文章作者 M管理員
        1. 芒果125347

          原本想產品不用寫代碼,學點常用工具,coder轉產品的??吹竭@一堆啥代碼,直接嚇退

          • Eliza三十

            哈哈哈哈哈,這點代碼對你來說算什么。??

          • ~141753

            這個你看過js就懂了,很簡單的一個判斷而已。

          • Eliza三十

            哈哈哈哈哈,是的。已經很自然語言了,比起那些機器語言,這算什么??

        2. 小凡

          看不懂這個,怎么用代碼寫的?

          • TinrayYAO

            這個也不是代碼吧,應該是沒有漢化的Axure

          • Eliza三十

            是的,就是用axure的交互,估計就是我沒漢化的原因吧??傆X得漢化過之后,有時候跑不靈,就沒漢化了。

        ?
        個人中心
        購物車
        優惠劵
        今日簽到
        有新私信 私信列表
        搜索
        国产亚洲日韩在线a不卡
        <acronym id="p33pj"><strong id="p33pj"></strong></acronym>
      2. <p id="p33pj"><strong id="p33pj"></strong></p>
        <track id="p33pj"></track><td id="p33pj"></td>
        <p id="p33pj"></p>
      3. <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

          1. <p id="p33pj"></p>