在實(shí)際應(yīng)用中，全局變量起到了信息傳遞作用和標(biāo)志作用，可以在多個(gè)頁(yè)面間傳遞信息，或者作為特殊場(chǎng)景的判斷依據(jù)。本文作者介紹了如何用Axure實(shí)現(xiàn)全局變量中空頁(yè)面的新增數(shù)據(jù)校驗(yàn)功能的操作步驟，以及實(shí)現(xiàn)過(guò)程中的一些注意事項(xiàng)，與大家分享。

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

1. 當(dāng)用戶沒有收藏歌曲時(shí)，點(diǎn)擊收藏導(dǎo)航進(jìn)入收藏管理頁(yè)面，為【空狀態(tài)】頁(yè)面。
2. 當(dāng)用戶有收藏歌曲時(shí)，點(diǎn)擊收藏導(dǎo)航進(jìn)入收藏管理頁(yè)面，為【有數(shù)據(jù)狀態(tài)】頁(yè)面。

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

一、實(shí)現(xiàn)原理

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

二、實(shí)現(xiàn)步驟

1. 添加全局變量

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

2. 添加收藏圖標(biāo)按鈕交互事件

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

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

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

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

4. 添加交互事件

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

5. 效果

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

當(dāng)用戶在播放頁(yè)再點(diǎn)擊取消收藏圖標(biāo)按鈕，此時(shí)再返回收藏頁(yè)面時(shí)，看到收藏頁(yè)面為空頁(yè)面。

三、注意事項(xiàng)

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

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

題圖來(lái)自Unsplash，基于CC0協(xié)議