Axure9教程:全局變量的應用

6 評論 4619 瀏覽 12 收藏 5 分鐘

編輯導讀:當一個頁面存在兩種或多種狀態內容時,可以考慮用【全局變量】判斷展示哪個狀態頁面。本文作者分享了一個Axure9教程,全局變量是如何應用的,希望對你有幫助。

當一個頁面存在兩種或多種狀態內容時,可以考慮用【全局變量】判斷展示哪個狀態頁面。例如:音樂收藏列表頁面的【空狀態】和【有數據】展示的兩種情況。

  • 當用戶沒有收藏歌曲時,點擊收藏導航進入收藏管理頁面,為【空狀態】頁面。
  • 當用戶有收藏歌曲時,點擊收藏導航進入收藏管理頁面,為【有數據狀態】頁面。

即點擊同一個按鈕,在不用情形下,會展示不同內容或者跳轉不同頁面。

一、實現原理

利用全局變量,在元件或者頁面載入時,判斷全局變量的值,根據不同的值,展示不同的內容或者跳轉不同頁面。

二、實現步驟

1. 添加全局變量

點擊頂部菜單【項目】-【全局變量設置】,添加一個全局變量,命名為collection(用來校驗用戶是否收藏的歌曲)。其默認值設置為0,代表沒有收藏歌曲,為空狀態頁面。當數值為1時,代表用戶有收藏歌曲。

2. 添加收藏圖標按鈕交互事件

當收藏按鈕為未收藏狀態時,選中【收藏】圖標按鈕,添加【單擊時】,設置收藏按鈕狀態為下一狀態即已收藏,同時添加【設置全局變量】,目標為【collection】,值為【1】。

當收藏按鈕為已收藏狀態時,選中【收藏】圖標按鈕,添加【單擊時】,設置收藏按鈕狀態為下一狀態即未收藏,同時選擇【設置全局變量】,目標為【collection】,值為【0】。詳細設計如下圖所示:

3. 收藏頁面元件設置

給收藏頁面添加一個【動態面板】,命名為內容,添加兩個狀態,分別state1為空狀態,state2為有收藏數據狀態。

4. 添加交互事件

選中【內容】,添加【載入時】交互事件,添加條件,當全局變量【collection=0】時,該面板狀態為state1;當全局變量【collection=1】時,該面板狀態為state2;

5. 效果

設置完成后,即可實現用戶在播放頁點擊收藏圖標按鈕收藏歌曲,查看收藏頁面時,即可看到收藏頁面有收藏的歌曲內容。

當用戶在播放頁再點擊取消收藏圖標按鈕,此時再返回收藏頁面時,看到收藏頁面為空頁面。

注意事項:

  • 收藏的歌曲內容是事先添加的你想要的歌曲,不會根據你收藏的哪一首歌曲就顯示哪一首。
  • 演示的效果,是展示有收藏和沒收藏的交互效果。不能達到點擊收藏一首,收藏頁面就會新增收藏一首。

 

 

本文由@小楊pm 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash, 基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 當收藏按鈕為未收藏狀態時,選中【收藏】圖標按鈕,添加【單擊時】,設置收藏按鈕狀態為下一狀態即已收藏,同時添加【設置全局變量】,目標為【collection】,值為【1】。

    這一步中,設置收藏按鈕狀態為下一狀態即已收藏,這個是怎樣設置的?這步沒有看明白,圖片上也沒有具體到哪個“元件”動作,還是要設置收藏按鈕為“創建動態面板”?

    來自湖南 回復
    1. 這一步是設置動態面板的狀態為下一狀態

      來自上海 回復
  2. 求教,請問上面的有沒有視頻教程呢?

    來自湖南 回復
    1. 暫時沒有出視頻教學呢,有疑問的可以講一下那一步無法實現

      來自上海 回復
  3. 求教,怎么讓中繼器中某行的值傳到中繼器中,每次都是失敗

    來自浙江 回復
    1. 截屏給我看一下

      來自上海 回復