側邊欄效果:如何在跳轉后保持側邊欄已有的展開狀態

0 評論 4182 瀏覽 7 收藏 6 分鐘

上篇講解了如何制作簡單的側邊欄及跳轉的交互,這一篇中,筆者將講解:如何在跳轉后保持側邊欄已有的展開狀態,以及通過字體顏色變化表示當前所在頁面。

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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!