一、實現效果 

二、代碼

wxml

編輯前端界面，步驟

菜單邏輯：

逐步取出數組中的項，首先取出頂部菜單項，然后選中后取出選中的底部數據（左側菜單+右側內容），然后點擊左側菜單取出選中的左側菜單對應的右側內容

①這里我的數據是全部封裝到一個數組對象的，首先我的循環數組，獲取每一個對象的信息，取出每一個對象的topname展示到頂部菜單欄，這里currentTopMenu既是默認值又是選中值（默認第一個為選中值）

②在頂部菜單被選擇時，會執行方法updateLeftMenus，更新底部菜單的信息。方法會根據當前選中的頂部菜單，查詢這個頂部菜單對應的這條對象。然后會根據這條對象判斷底部信息是否有數據，如果沒有數據就直接不展示；如果有數據設置左側菜單完整項leftMenus的值這條對象中的LeftMenus值（是頂部菜單對應的底部數據的數組，含對應的左側菜單加右側數據），設置左側菜單默認選中為首項，并且設置右側內容默認為首項的全部內容

1、搜索框+購物車

• 使用flex布局，使搜索框與購物車水平排列
• 使用布局布局，將搜索圖標與輸入框在同一個view中水平排列
• 適當調整搜索框與購物車兩者之間的間距以及位置
• 給購物車圖標增加一個外層view，設置寬高，并使用圓角border-radius設置為圓形外層

2、頂層菜單

• 使用循環，將數組中的每一項對象的topname的作為值（也就是頂部菜單的菜單值）
• 給選中的菜單一個選中的css效果，使用{{currentTopMenu === item.topname ? 'topactive' : ''}}"使用三目運算動態增加class的值（也就是選中時底部有個顏色條），currentTopMenu即為選中的頂部菜單的值
• 點擊頂部菜單項時傳遞菜單的名稱，data-menu="{{item.topname}}"
• 執行頂部菜單的點擊事件

3、左側菜單欄

• 點擊頂部菜單，實現對下側的左側菜單聯動
• 循環頂部選擇的項LeftMenus，將每一個左側菜單進行循環展示
• 給左側菜單一個選中效果，{{currentLeftMenu === item.name ? 'leftactive' : ''}}實現一個背景和文字顏色的選中，增加一個view實現一個左側選中綠條

4、右側內容展示