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

當一個頁面存在兩種或多種狀態(tài)內(nèi)容時，可以考慮用【全局變量】判斷展示哪個狀態(tài)頁面。例如：音樂收藏列表頁面的【空狀態(tài)】和【有數(shù)據(jù)】展示的兩種情況。

• 當用戶沒有收藏歌曲時，點擊收藏導航進入收藏管理頁面，為【空狀態(tài)】頁面。
• 當用戶有收藏歌曲時，點擊收藏導航進入收藏管理頁面，為【有數(shù)據(jù)狀態(tài)】頁面。

即點擊同一個按鈕，在不用情形下，會展示不同內(nèi)容或者跳轉(zhuǎn)不同頁面。

一、實現(xiàn)原理

利用全局變量，在元件或者頁面載入時，判斷全局變量的值，根據(jù)不同的值，展示不同的內(nèi)容或者跳轉(zhuǎn)不同頁面。

二、實現(xiàn)步驟

1. 添加全局變量

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

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

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

當收藏按鈕為已收藏狀態(tài)時，選中【收藏】圖標按鈕，添加【單擊時】，設(shè)置收藏按鈕狀態(tài)為下一狀態(tài)即未收藏，同時選擇【設(shè)置全局變量】，目標為【collection】，值為【0】。詳細設(shè)計如下圖所示：

3. 收藏頁面元件設(shè)置

給收藏頁面添加一個【動態(tài)面板】，命名為內(nèi)容，添加兩個狀態(tài)，分別state1為空狀態(tài)，state2為有收藏數(shù)據(jù)狀態(tài)。

4. 添加交互事件

選中【內(nèi)容】，添加【載入時】交互事件，添加條件，當全局變量【collection=0】時，該面板狀態(tài)為state1；當全局變量【collection=1】時，該面板狀態(tài)為state2；

5. 效果

設(shè)置完成后，即可實現(xiàn)用戶在播放頁點擊收藏圖標按鈕收藏歌曲，查看收藏頁面時，即可看到收藏頁面有收藏的歌曲內(nèi)容。

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

注意事項：

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

本文由@小楊pm 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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