微信小程序原生开发——商品分类左右联动页面（类似于喜茶）

微信原生开发商品分类左右联合滚动

首先上图看一下效果：

大概的效果就是滑动右边，左边分类会跟着滚动。点击左侧分类，右侧商品也会跟着跳到对应的分类。
类似于喜茶、瑞幸小程序那种商品分类。
.wxml

 <view class="bottom_menu">
    <!--左侧导航栏 -->
    <scroll-view
            scroll-y="true"
            class="scroll_left"
            show-scrollbar="false"
            enhanced="true"
            scroll-with-animation="true"
            enable-back-to-top="true">
        <view wx:for="{{leftClassesMenuList}}"
              wx:key="{{item.id}}"
              class="{{selectedLeftMenuItem == item.id? 'leftTab-selectedItem':'leftTab-items'}}"
              bindtap="{{selectedLeftMenuItem == item.id?'':'selectClassesClick'}}"
              data-index="{{index}}"
              data-id="{{item.id}}">
          <text class="title">{{item.name}}</text>
      </view>

    </scroll-view>
    <!--右侧商品 -->
    <scroll-view
            scroll-y="true"
            class="scroll_right"
            scroll-with-animation="true"
            enable-back-to-top="true"
            scroll-top="{{scrollTop}}"
            bindscrolltolower="loadMore"
            scroll-into-view="{{toView}}"
            bindscroll="scrollProductList"
    >
      <view class="right_class">

        <view wx:for-item="category" wx:for="{{categories}}" id="{{'productItem'+category.id}}" wx:key="{{index}}">
          <!--                        <view class="tips" wx:if="{{good.length === undefined}}">-->
          <!--                            <image src="{{no_data}}" style="width: 284rpx;height: 188rpx;margin-top: 10rpx"></image>-->
          <!--                            <text style="color: #a2a2a2;size: 20rpx;font-weight: bold">暂无商品</text>-->
          <!--                        </view>-->
          <view style="display: flex;padding: 20rpx 20rpx 0 20rpx;">
          <view class="category_name">{{category.name}}</view>
            <view class="category_line"></view>
          </view>
          <view wx:for="{{category.shopGoodsDTOList}}" wx:for-item="good" wx:key="{{good.id}}">
          <view class="product" bindtap="getGoodsInfo" data-id="{{good.shopSalingGoods.id}}">
            <image class="img" src="{{imgPath.createImgWebPath(imgWebUrl,good.coverimg)}}" mode="heightFix"></image>
            <view class="content">
              <view class="name"> {{good.name}}</view>
              <view class="choose">选规格</view>
              <view class="price">
                <view class="salePrice">￥{{good.shopSalingGoods.salePrice}}</view>
                <view class="originalPrice">￥{{good.shopSalingGoods.originalPrice}}</view>
              </view>
            </view>
          </view>
          </view>
        </view>
      </view>

    </scroll-view>
  </view>

.js 这里是部分代码

data:{
      // 左侧菜单列表
      leftClassesMenuList: [],
      // 左侧菜单选中item
      selectedLeftMenuItem: "",
      // 右侧列表 带分类
      categories: [],
      // 商品列表
      productList: [],
      //把右侧第几个商品分类滚动到顶部
      toView:"",
      //弹窗开关
      showModal: false,
      }
      
	//获取数据方法 简写  对数据进行定位处理
	getData(){
   this.setData({
          leftClassesMenuList: leftClassesMenuList,
          categories: leftClassesMenuList,
          productList: dataSource,
          selectedLeftMenuItem: leftClassesMenuList[0] ? leftClassesMenuList[0].id:'',//默认左侧第一个选中
          no_data: app.globalData.emptyStatusImage.no_data,
          toView: leftClassesMenuList[0] ? 'productItem' + leftClassesMenuList[0].id:''
      })
      // 给右侧商品列表循环赋值列表项的上边界坐标和高度
      this.data.categories.forEach(item => {
          // 添加节点的布局位置的查询请求
          wx.createSelectorQuery().select(`#productItem${item.id}`).boundingClientRect(rect =>  {
              item.offsetTop = rect.top
              item.height = rect.height
          }).exec()
      })
      }
      }
		// 左侧点击 右侧滚动事件
      //左侧菜单点击
    selectClassesClick: function(e) {
        let dataset = e.currentTarget.dataset;
        let id = dataset.id;
        this.setData({
            selectedLeftMenuItem: id,
            toView: 'productItem' + id //不能数字开头，所以开头加了productItem
        });
    },

    // 监听右边商品列表滑动
    scrollProductList(e){
        this.data.categories.forEach(item => {
            if (e.detail.scrollTop >= (item.offsetTop - 175) && e.detail.scrollTop <= (item.offsetTop - 175 + item.height)){
                this.setData({
                    selectedLeftMenuItem: item.id
                })
            }
        })
    },
    // 滚动到底部时触发
    loadMore(e) {
        let index = this.data.categories.length
      this.setData({
          selectedLeftMenuItem: this.data.categories[index-1].id
      })
    },

主要是提前给数据进行定位，左右列表绑定好对应关系。css代码就不贴了