微信小程序如何实现美团菜单(微信如何添加美团小程序)

本文主要详细介绍了微信小程序实现美团菜单，有一定的参考价值，感兴趣的朋友可以参考一下。

本文分享微信小程序实现美团菜单的具体代码，供大家参考。具体如下。

1.功能只是菜单功能的一部分，仅供参考。

2.需求描述:当右侧菜品滚动时，左侧菜品所选择的类别与右侧第一行菜品的类别相对应。

我的实现方法是:(每道菜的高度*该类别的菜数)+该类别菜的高度= x，每次滚动都判断当前scrollTop是否在x的范围内？选择左边的类别:左边不变；问题:我在rpx设置的是碟形高度，而在px设置的是scrollTop。也就是说，上面计算的X I是一个变量，所以当测试模型改变时，这个函数就失效了。。。你有什么好主意吗？

onLoad(e){ let goods list = this . data . goods list；//初始化到每个碟顶的距离为(设I = 0；我& ltgoods list . length；i++) { if (i！= 0) goodsList[i]。scroll top = parse int(goods list[I -1]。scroll top)+parse int((goods list[I -1]. goods . length * 90)+35)} this . data . goods list = goods list；}，//右滚动事件ongoodsscroll:function(e){ let that = this；//当前滚动部分到页面顶部的距离为let scroll top = parse int(e . detail . scroll top)；let goods list = that . data . goods list；for(设I = 0；我& ltgoods list . length；i++){ let currentScrollTop = goods list[I]。scrollTop设next scroll top = 0；if((I+1)= = goods list . length)next scroll top = goods list[I]。scrollTopelse next scroll top = goods list[I+1]。scrollTopif(currentScrollTop & lt；滚动条& amp& ampscrollTop & ltnextScrollTop){ that . setdata({ classifyidlight:goods list[I].id，classify deleted:goods list[I]。id }) } }}

关于上述问题2，解决方法如下，但具体参数不清楚是怎么回事，定位也不是很准。请有什么好的方法。

ongoodsscroll上的右滚动事件:function(e){ let that = this；设scale = e . detail . scroll width/600；设scroll top = e . detail . scroll top/scale；设h = 0；let classifySeleted设len = that . data . goods list . length；that . data . goods list . foreach(function(classify，I){ var _ h = 7小编classify . goods . length * 180；if(scroll top & gt；= H-100/scale){ classifySeleted = classify . id；} h+= _ h；});that . setdata({ classifySeleted:classifySeleted，classifyIdLeft: classifySeleted，}) }，