微信小程序:多菜单栏设计效果

一、实现效果 

二、代码

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、右侧内容展示