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

前言

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

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

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

先上效果图：

这里有2个功能点：

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

基本思路

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

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

所以你可能已经想到办法了，左边有几个分类标签，右侧就有几个产品块，例子中有3个分类，每个分类都有一个标题和若干个商品容器，我们把各分类商品的区间高度位置（标题高度 +商品容器高度*商品数量），放进一个数组，数组当然从0开始，因为初始滚动位置是0

当你点击左侧标签的时候，得到索引值，根据索引值，带进区间高度的数组，取得值，就是商品列表的scroll-top

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