微信小程序商品上下分类结构

微信小程序中的商品上下分类结构可以通过使用scroll-view组件和SelectorQuery来实现。具体步骤如下：

1. 在页面的wxml文件中，使用scroll-view组件创建一个可滚动的视图容器，设置其属性为vertical="true"，表示垂直滚动。

2. 在scroll-view组件内部，创建左侧分类列表和右侧商品列表。

3. 使用SelectorQuery获取左侧分类列表和右侧商品列表的节点信息。

4. 监听scroll-view组件的滚动事件，当右侧商品列表滚动到顶部时，切换左侧分类的状态。

5. 当右侧商品列表的位置处于触顶并且包含顶部位置时，同样激活左侧分类的状态。

下面是一个示例代码：

<scroll-view class="container" scroll-y="true">
  <view class="left-category">
    <!-- 左侧分类列表 -->
  </view>
  <view class="right-goods">
    <!-- 右侧商品列表 -->
  </view>
</scroll-view>

// 获取节点信息
const query = wx.createSelectorQuery()
query.select('.left-category').boundingClientRect()
query.select('.right-goods').boundingClientRect()
query.exec(function(res) {
  const leftCategoryHeight = res[0].height
  const rightGoodsHeight = res[1].height
  // 根据节点信息进行相应的操作
})

// 监听滚动事件
wx.createIntersectionObserver().relativeToViewport().observe('.right-goods', function(res) {
  if (res.intersectionRatio > 0 && res.boundingClientRect.top <= 0) {
    // 右侧商品列表滚动到顶部，切换左侧分类状态
  }
})

请注意，上述代码仅为示例，具体实现方式可能因项目需求而有所不同。