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

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

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
    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
        }) 
      }
    })
  },
})