前言本项目是公司之前的一个app项目，一个餐厅自己的点餐app，已经下线了。我在业余时间用它来练习。最早的版本是html+jq，本来打算放在公众号里面的。后来就先用vue了。恍然大悟后，最近研究了一个小程序，当然也是练手的好方法。Demovue有一个项目视频教程，名为“你在实战中饿了吗？”它谈论菜单链接。在小程序中，思路是一样的，只是细节不同。效果图如下：这里有两个功能点：当你点击左边的分类标签时，在右边滚动到相应的锚点（在html中，确实可以使用锚点，就是这样做的thetime)向右滚动时，以顶部为点，滚动到哪个分类，激活左侧对应标签（高亮效果）基本思路微信没有anchor，左右滚动到对应位置点，右边的商品列表使用了scroll-view原生组件，你只能设置它的scroll-top（滚动位置，和html同义），所以你可能想出了办法，上面有几个分类标签左边，右边是几个产品块。示例中有3个类别，每个类别都有一个标题和几个产品容器。我们把每类商品的区间高度位置（标题高度+商品容器高度*商品数量）放到一个数组中。当然数组是从0开始的，因为初始滚动位置是0。当你点击左边的标签时，你得到的是索引值。根据索引值，传入区间高度数组并获取值，即当商品列表的scroll-top向右滚动并激活左侧对应的标签滚动时，将得到真正的-timescroll-top，带入区间高度数组，计算它在什么位置，返回对应的索引值，用于判断左侧菜单中哪个标签需要高亮显示。根据上面的草图，假设我们有3个类别，每个分类2个产品，得到的高度数组为[0,200,400,600]假设我们滚动到298像素的位置，根据高度数组比较，200多，不超过400，应该返回数组的索引：11是第二个位置，即左侧菜单中应该激活和高亮的第二个标签的相关代码根据上面草图的结果，在这个比如类目和商品容器在同一层级，每个类目的商品容器都是一个独立的容器，不再统一包裹在一个容器中。我们在onLoad事件中加载商品数据，并将商品数据赋值给data中的商品。这里注意：需要在setData的回调中调用计算乘积区间高度的方法，因为setData之后，渲染视频是异步的，所以必须在setData回调中调用。下面是获取商品各类区间高度的方法。至于获取视图容器的代码，直接搬过来了。不用解释，下面是左侧菜单的视图代码，根据索引值用于突出显示哪个标签绑定了点击事件。以下是单击左侧菜单标签时的情况。根据当前点击标签的索引值，带入区间高度数组，赋值给data中的listViewScrollTop值，并且scroll容器中的scroll-top参数绑定了这个值，就会滚动到对应的高度，并给product的scroll容器绑定一个scroll事件。滚动时，可以获取当前滚动高度，将当前高度与计算得到的区间高度数组中比较，属于哪个区间？返回对应的索引值，赋值给data中的cateListActiveIndex，计算出应该在左边高亮显示哪个标签。需要的话自己拉一下：gitee.com/vbyzc/mz-wx...
