微信小程序实现左右联动的菜单列表

实现效果如下：

实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：

scroll-top：设置族基竖向滚动条位置（可视雹消区域最顶部到scroll-view顶部的距离）；

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚兆肆谨动到该元素；

bindscroll：滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

结构图示：

wxml:

js:

数据结构：

如果你还想实现从其他页面，点击按钮跳转到当前页面，并且列表滚动到指定项，此项在可视区域的第一个展示：

wxss:

实现效果为芦蚂页面向上滚动隐藏顶部分类颤哗游菜单,向下滚动则显示顶部菜单茄销,效果图如下所示:

onLoad

onPageScroll

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

先看看效果图：

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

---