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

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

先看看效果图：

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

要想玩转小程序你需要做以下事情:

1.先去注册一个小程序

2.下载微信小程序的开发软件

3.学习下前端的开发框架，比如vue这样的框架

4.在github上学习抄写学习理解下别人的代码

5.申请个云端数据库服务和api服务

有些方法后就可以开始正式的小程序开发了。

在开发你的小程序之前你得整理下你的设计思路，准备投入资源，因为小程序只是一个前端的可运行的程序，他还缺少相应的的后台数据库和调用的api服务，所以你需要在腾讯云或阿里云上申请数据库服务用来存储你的客户信息，同时还得提供一套api服务，而api服务你可以使用很多种后台需要来实现，为了安全你还得将你的api实现安全认证，用到最多的是oauth认证和jwt.初学者可以使用jwt认证方式，最简单。

---