側邊欄效果:如何在跳轉后保持側邊欄已有的展開狀態
上篇講解了如何制作簡單的側邊欄及跳轉的交互,這一篇中,筆者將講解:如何在跳轉后保持側邊欄已有的展開狀態,以及通過字體顏色變化表示當前所在頁面。
1.選擇P1+P2矩形,雙擊右側檢視,屬性,交互,鼠標單擊時的Case1
2.點擊切換選中狀態,選擇當前元件,確定
3.選擇P1+P2矩形,右側屬性,交互樣式設置,點擊選中
4.填充顏色選黃色,確定
5.雙擊右側概要,P1+P2DT動態面板下的State1,進入該頁面
6.點擊P1單元格,右側屬性,交互樣式設置,選中
7.字體顏色選橙色,確定
8.同樣將P2單元格選中的交互樣式設置為字體顏色橙色
9.雙擊左側側邊欄母版,回到側邊欄母版首頁,然后點擊布局,管理母版觸發事件
10.點擊加號,新增自定義事件,取名為PageC
11.雙擊右側概要,P1+P2DT動態面板下的State1,進入該頁面
12.單擊空白處,在右側檢視,屬性,點擊載入時
13.點擊自定義事件,選中PageC,確定
14.雙擊左側New Page1頁面
15.點擊New Page1中的側邊欄母版區域,右側檢視,屬性,交互,單擊PageC
16.設置面板狀態,選擇P1+P2DT動態面板,選中如果隱藏則顯示面板,推動/拉動元件。確定
17.設置選中,選擇P1單元格,確定
18.設置選中,選擇P1+P2矩形,確定
19.同理,進入New Page2頁面,對New Page2中的側邊欄區域,設置P1+P2DT動態面板為如果隱藏則顯示面板,推動/拉動元件;設置選中P2單元格,設置選中P1+P2矩形,確定
此時預覽,即可看到以下效果
- 點擊跳轉到P1頁面時,側邊欄的P1+P2為打開狀態,顏色為黃色,P1單元格字體為橙色,表示當前頁面為P1+P2下的P1頁面;
- 點擊跳轉到P2頁面時,側邊欄P1+P2為打開狀態,顏色為黃色,P2單元格字體為橙色,表示當前頁面為P1+P2下的P2頁面。
本文由 @落塵 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash ,基于 CC0 協議
評論
- 目前還沒評論,等你發揮!