小程序外卖项目实践之-左右菜单联动

前言

本项目是公司以前一个app项目，一个餐厅本身的订餐app，已经下线了，

老衲是闲时用来练手，最先是html+jq版本，准备放在公从号里的，后来先是用vue实现了它，最近研究下小程序，固然也是好的练手demo

vue有一个项目视频教程叫实战饿了么，它里面有讲到菜单联动的，换在小程序里面，思路也同样，只不过细节不同

先上效果图：

这里有2个功能点：

• 点击左侧分类标签的时候，右边滚动到相应的锚点（html中，确实能够用锚点，而当时就是这么作的）
• 右边滚动的时候，以顶部为点，滚动到哪一个分类，左边激活（高亮效果）对应的标签

基本思路

点左侧右边滚动到相应的位置

因为微信没有锚点这东西，右边商品列表使用的是scroll-view原生组件，只能设置它的scroll-top（滚动位置，和html同样意思）

因此你可能已经想到办法了，左边有几个分类标签，右侧就有几个产品块，例子中有3个分类，每一个分类都有一个标题和若干个商品容器，咱们把各分类商品的区间高度位置（标题高度 +商品容器高度*商品数量），放进一个数组，数组固然从0开始，由于初始滚动位置是0
当你点击左侧标签的时候，获得索引值，根据索引值，带进区间高度的数组，取得值，就是商品列表的scroll-top

右侧滚动时，左侧激活相应标签

滚动时，获得即时的scroll-top，带进区间高度数组，计算下在哪一个位置，反回相应的索引值，用来判断左侧菜单标签是第几个须要高亮

根据上面的草图，假设咱们三个分类，每一个分类2个产品，获得的高度数组就是[0,200,400,600]

假设咱们滚动的时候，滚动到298像素的位置，根据比对高度数组，超过200，不超过400，应该返回数组的索引：1

1就是第二个位置，也就是咱们左侧菜单应该激活高亮的第2个标签

相关代码

根据上面的草图的结果，本例中分类和商品容器为同级，且每一个分类的商品容器为独立容器，再也不统一包裹在一个容器中

咱们在onLoad事件中，加载商品数据，把商品数据赋值到data中的goods

注意此处：须要在在setData的回调中，调用计算商品区间高度的方法，由于setData以后，渲染视频是异步的，因此必须在setData回调中调用

下面是获取商品各分类区间高度的方法，至于获取视图容器的代码直接搬来，不用解释

下面是左侧菜单的视图代码，根据计算出来的索引值，来实现高亮哪个标签
绑定一个点击事件

下面是点击左侧菜单标签的时候，根据当点前击的标签的索引值，带到区间高度数组，赋值到data中的listViewScrollTop值，而且在滚动容器中scroll-top参数，绑定到这个值，就会滚动到对应的高度

给商品滚动容器绑定一个滚动事件， 滚动的时候，可获得当前滚动高度，比较当前高度在已计算出来的区间高度数组中，是属于哪一个区间，返回对应索引值，赋值到data中的cateListActiveIndex

用于左侧计算应该高亮哪一个标签

总结：思路上面已说明，贴代码是例常

附上项目地址，有须要的本身拉：gitee.com/vbyzc/mz-wx…

模拟数据是本地模拟，项目目录下的mock目录就是，看这里：为小程序开发建立本地mock数据服务器