外卖点餐列表滑动 微信小程序_微信小程序实现类似外卖平台右侧商品滑动时，左侧分类导航栏的相应分类被选中...

左侧导航栏与右侧商品列表相互联动，类似喜茶这种联动效果

image.png

实现思路：

1.使用组件scroll-view的属性scroll-into-view(值应为某子元素id，id不能以数字开头)。设置哪个方向可滚动，则在哪个方向滚动到该元素)，实现点击左侧导航分类，右侧滑动到相应商品(这个比较简单，调动API即可实现)

2.使用组件scroll-view的bindscroll事件(滚动时触发)获取右侧商品列表父元素scroll-view卷上去的高度e.detail.scrollTop，使用wx.createSelectorQuery()和boundingClientRect方法(添加节点的布局位置的查询请求)获取右侧商品列表里每一块子元素节点的高度(height)和距离父元素上边界距离(上边界坐标top)，右侧列表滚动时，遍历右侧商品列表项，当父元素卷上去的高度>=子元素上边界坐标，并且<=子元素上边界坐标加子元素的高度时，获取当前区域的商品分类id，赋值给左侧选中项id

具体代码：

{ {item.name}}

{ {item.cateName}}

{ {goodsItem.goodsName}}

￥{ {goodsItem.goodsPayprice}}

var that;

Page({

data:{

// 左侧菜单列表

leftClassesMenuList: [],

// 左侧菜单选中item