微信小程序菜单怎么做

1、首先新建一个微信小程序项目，在项目中找到app.json这个数据文件。

app.json：是新建项目中默认生成的一个配置文件

2、底部菜单的名称是tabBar，这个名称是跟window窗口同级的，所以在这个配置前加一个逗号即可，接着写入底部菜单的集合，注意括号的位置

tabBar里面的配置有，Color指的是底部菜单文本的默认颜色，selectedColor指的是聚焦选中的底部菜单文本的颜色，background指的是底部菜单的背景色，borderStyle指的是边距现实的风格颜色，list是配置页面路径，菜单文本，菜单图片元素的集合

3、list的元素讲解：底部菜单有多少个页面就设置多少个集合，以逗号分隔开。

pagePath指的是页面的路径，建议第一个跳转集合设置成小程序的首页，也就是index页面，iconPath指的没有选中聚焦底部菜单时小图标的路径，selectIconPath指的是选中底部菜单式的图标路径，texe则是菜单文本。

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

先看看效果图：

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项目，直接抓下来就可以打开使用，只需对显示的数据进行修改即可。

---