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

【微信小程序实现类似外卖平台右侧商品滑动时，左侧分类导航栏的相应分类被选中】左侧导航栏与右侧商品列表相互联动，类似喜茶这种联动效果

文章图片
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.cateName}} {{goodsItem.goodsName}} ￥{{goodsItem.goodsPayprice}}

var that; Page({ data:{ // 左侧菜单列表 leftClassesMenuList: [], // 左侧菜单选中item selectedLeftMenuItem: "", // 商品列表 productList: [], //把右侧第几个商品分类滚动到顶部 toView:"", }, onload: function(options) { that = this; }, // 获取右侧商品列表 getProductList: function() { let currentUrl; let currentParams; //util文件里封装了get请求 util.getRequest(currentUrl, currentParams, res => { let dataSource = res.data.data.goods; //右侧商品列表 let leftClassesMenuList = res.data.data.categoryList; //左侧分类列表 that.setData({ productList: dataSource, leftClassesMenuList: leftClassesMenuList, selectedLeftMenuItem: leftClassesMenuList[0] ? leftClassesMenuList[0].id:'',//默认左侧第一个选中 toView: leftClassesMenuList[0] ? 'productItem' + leftClassesMenuList[0].id:'' }) // 给右侧商品列表循环赋值列表项的上边界坐标和高度 that.data.productList.forEach(item => { // 添加节点的布局位置的查询请求 wx.createSelectorQuery().select('#productItem' + item.cateId).boundingClientRect(rect => { item.offsetTop = rect.top; item.height = rect.height; }).exec() }) console.log(that.data.productList, "that.data.productList") }) }, // 左侧菜单栏切换事件 selectClassesClick: function(e) { let dataset = e.currentTarget.dataset; let id = dataset.id; that.setData({ selectedLeftMenuItem: id, toView: 'productItem' + id //不能数字开头，所以开头加了productItem }); }, // 监听右边商品列表滑动 scrollProductList(e){ console.log(e) that.data.productList.forEach(item => { if (e.detail.scrollTop >= (item.offsetTop - 55) && e.detail.scrollTop <= (item.offsetTop - 55 + item.height)){ that.setData({ selectedLeftMenuItem: item.cateId }) } }) }, })