本文要跟大家講的是，如何利用製作左右設限滑塊頁眉菜單欄，一起來看看~
1. 頁面佈局
頁面設定
新建一個頁面，命名為【左右設限滑塊頁眉菜單欄】。
在【左右設限滑塊頁眉菜單欄】內新建命名為【【左右設限滑塊頁眉菜單欄】的動態面板，動態面板的【State1】更改為【全部】，在【全部】內新建一個命名為【右浮圖標】的【組合文件】和一個命名為【切換菜單】的【動態面板】，【切換菜單】內的【State1】更改【文本】。
（1）右浮圖標
從元件庫內分別拉入兩個【矩形】元件分別做圖標的圖標背景1和圖標背景2。
圖標背景1的【填充】色為#ffffff，透明度為30%，圖標背景2的【填充】色為#ffffff，透明度為90%，切圖標背景2的X大於圖標背景2X的8px，然後將圖標嵌入圖標背景1和圖標背景2兩者形成的半透明上下左右居中區域。
（2）切換菜單
從元件庫內分別拉入14個【文本標籤】元件依次在切換菜單規定的區域範圍內排序成行，並依次將內容更改為1至14的數字。
【文本標籤】的【填充】色皆為透明，字體顏色#666666。
2. 動態交互
效果設計
（1）圖標交互樣式設置
選中【圖標】，進行【交互樣式設置】，將鼠標懸停、鼠標按下、選中的交互樣式的另一種狀態的【圖片】導入。
（2）文本標籤的交互樣式設置
選中表現1至14個數字的【文本標籤】元件，進行【交互樣式設置】，將鼠標懸停、鼠標按下、選中的交互樣式的【字體顏色】進行設置。
（3）交互流程
1）實現左右設限滑塊頁眉菜單欄的動態交互
選中【左右設限滑塊頁眉菜單欄】動態面板內的【全部】，在【屬性】中設定【向左拖動結束時】和【向右拖動結束時】的用例，配置相關的動作。
步驟一：設置【向左拖動結束時】用例的配置動作
在case1【組織動作】中添加【移動】動作，在【配置動作】內勾選【切換菜單】動態面板，設置【移動】為【經過】狀態，x=-150，y=y，【動畫】為【緩進緩出】，時間t=2000毫秒，【界限】中添加【左側】邊界，且大於等於-338。
步驟二：設置【向右拖動結束時】用例的配置動作
在case1【組織動作】中添加【移動】動作，在【配置動作】內勾選【切換菜單】動態面板，設置【移動】為【經過】狀態，x=-200，y=y，【動畫】為【緩進緩出】，時間t=2000毫秒，【界限】中添加【左側】邊界，且小於等於0。
預覽效果
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
