微信小程序之多级联动菜单

多级联动菜单在许多的筛选场景应用十分广泛。

先看看效果图：

menu.wxml

menu.wxss

menu.jsp

menu.wxss

menu.js

menu.wxml

menu.wxss

menu.js

这里主要针对一个菜单栏进行详细讲解，其余两个原理相同。

游戏

menu.wxml

这里推荐大家使用 <scroll-view></scroll-view> 组件，这样超过限定的高度的话，就可以在内部产生滚动条，整体布局不会乱。使用 <scroll></scroll> 组件的时候，记得要开启滚动的方向（scroll-y表示纵向，scroll-x表示横向），这些属性默认是关闭的。

menu.wxss

注意：使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

menu.js

menu.js部分主要的难点就是wxml和js之间的数据交互，这里很容易弄晕，尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。

最后给大家提供该项目的github项目，直接抓下来就可以打开使用，只需对显示的数据进行修改即可。

微信公众号里面设定菜单，目前最多只能到2级菜单，你发的截图看起来是十点读书找第三方做的小程序，个性化比较强的，不是默认的那个页面模板。

设置公众号子菜单的教程可以参考：

如何设置公众号子菜单

借助页面模板的话可以达到三级的，也就是分类->再分类，也分两种：

1，微信默认的页面模板，但有些许限制。最近微信还出了专辑模板但是只能原创使用，而且只是一个列表。

2，使用第三方的，举个例子：智未来页面模板，可以参考。相对来说没那么多的限制。

另外，如果要达到四级以上的分类，用默认的页面模板估计做不到，可以使用第三方的来解决，也是用智未来举个例子：

设定多级菜单分类例子距离

供楼主参考，可以达到你附图的类似效果。

tips：

1.小程序底部菜单标签个数不少于2个，最多不超过5个。

2.可以在 阿里巴巴矢量图标库 找到你需要的图标。

3.小程序建议图标大小为81*81px

我这边选择的是64尺寸的png图片，每一个图标选择两种颜色，分别对应未选中状态和选中状态，具体按照你们设计项目进行

tips：

1.建立项目图片文件夹：images

2.在pages中建立相对应的菜单栏目文件夹

3.配置app.json： tabBar配置

1.app.json中，"window":{}和"tabBar":{}是同级

2. 全局配置

3. 设置tabbar地址:wx.setTabBarBadge(Object object)

---