左側導航欄與右側商品列表相互聯(lián)動砌滞，類似喜茶這種聯(lián)動效果

image.png

實現(xiàn)思路：
1.使用組件scroll-view的屬性scroll-into-view(值應為某子元素id歇父，id不能以數(shù)字開頭）。設置哪個方向可滾動搀玖，則在哪個方向滾動到該元素)余境，實現(xiàn)點擊左側導航分類，右側滑動到相應商品（這個比較簡單灌诅，調動API即可實現(xiàn)）
2.使用組件scroll-view的bindscroll事件（滾動時觸發(fā)）獲取右側商品列表父元素scroll-view卷上去的高度e.detail.scrollTop芳来，使用wx.createSelectorQuery()和boundingClientRect方法（添加節(jié)點的布局位置的查詢請求）獲取右側商品列表里每一塊子元素節(jié)點的高度（height）和距離父元素上邊界距離（上邊界坐標top），右側列表滾動時猜拾，遍歷右側商品列表項即舌，當父元素卷上去的高度>=子元素上邊界坐標，并且<=子元素上邊界坐標加子元素的高度時挎袜，獲取當前區(qū)域的商品分類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:''
      })
      // 給右側商品列表循環(huán)賦值列表項的上邊界坐標和高度
      that.data.productList.forEach(item => {
        // 添加節(jié)點的布局位置的查詢請求
        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 //不能數(shù)字開頭，所以開頭加了productItem
    });
  },
  // 監(jiān)聽右邊商品列表滑動
  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
        }) 
      }
    })
  },
})