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

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

具体代码：

  <!--  wxml -->
<view class="cotent">
  <!-- 左侧tab菜单栏 -->
  <scroll-view class="leftTabBox clearFix" scroll-with-animation="true" enable-back-to-top="true" scroll-y="true" style="height:100%">
    <block wx:for="{{leftClassesMenuList}}" wx:key="{{item.id}}">
      <button formType="submit" class="{{selectedLeftMenuItem == item.id?'leftTab-selectedItem':'leftTab-items'}}" bindtap="{{selectedLeftMenuItem == item.id?'':'selectClassesClick'}}" hover-class='none' data-index="{{index}}" data-id="{{item.id}}">
        <view class="leftTab-nameBox">{{item.name}}</view>
      </button>
    </block>
  </scroll-view>
  <!-- 右侧商品列表 -->
  <scroll-view class="bigWrap productList clearFix" scroll-with-animation="true" enable-back-to-top="true" scroll-y="true" scroll-top="{{scrollTop}}" style="height:100%" bindscrolltolower="loadMore" scroll-into-view="{{toView}}" scroll-with-animation="true" bindscroll="scrollProductList">
    <view wx:for="{{productList}}" id="{{'productItem'+item.cateId}}" wx:key="{{index}}">
      <view class="classesTitle">{{item.cateName}}</view>
      <view class="product-item clearFix" data-item="{{goodsItem}}" bindtap='showGoodsDetail'> 
        <image class="product-image" src="{{goodsItem.goodsImgUrl}}" mode="aspectFit" /> 
        <view class="product-content">
          <view class="product-title">{{goodsItem.goodsName}}</view>
          <text class="product-price">￥{{goodsItem.goodsPayprice}}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

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