小程序商品分类，左右联动组件示例

<view class="container">
  <!-- 左侧分类 -->
  <scroll-view class="left-menu" scroll-y>
    <view wx:for="{{categories}}" wx:key="index" bindtap="selectCategory" data-id="{{item.id}}" class="menu-item {{active === item.id ? 'active' : ''}}">
      {{item.name}}
    </view>
  </scroll-view>

  <!-- 右侧商品列表 -->
  <scroll-view class="right-content" scroll-y bindscroll="scroll" scroll-with-animation scroll-into-view="{{scrollIntoView}}">
    <view wx:for="{{products}}" wx:key="index" id="chunk{{item.id}}" class="category">
      <view class="category-title">{{item.name}}</view>
      <view wx:for="{{item.products}}" wx:key="subid" class="product-item">
        {{item.name}}
      </view>
    </view>
  </scroll-view>
</view>

.container {
  display: flex;
  height: 100vh;
}
.left-menu {
  width: 25%;
  background: #f8f8f8;
}
.menu-item {
  padding: 15px;
  text-align: center;
}
.active {
  background: #ff6600;
  color: #fff;
}
.right-content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
}
.category-title {
  font-weight: bold;
  padding: 10px;
  background: #ddd;
}
.product-item {
  padding: 10px;
}

　　

Page({
  data: {
    categories: [{
        id: "fruits",
        name: "水果"
      },
      {
        id: "vegetables",
        name: "蔬菜"
      },
      {
        id: "drinks",
        name: "饮料"
      }
    ],
    products: [{
        id: "fruits",
        name: "水果",
        products: [{
          id: 101,
          name: "苹果"
        }, {
          id: 102,
          name: "香蕉"
        }, {
          id: 103,
          name: "香蕉"
        }, {
          id: 104,
          name: "香蕉"
        }, {
          id: 105,
          name: "香蕉"
        }, {
          id: 106,
          name: "香蕉"
        }, {
          id: 107,
          name: "香蕉"
        }, {
          id: 108,
          name: "香蕉"
        }, {
          id: 109,
          name: "香蕉"
        }, {
          id: 110,
          name: "香蕉"
        }, {
          id: 111,
          name: "香蕉"
        }, {
          id: 112,
          name: "香蕉"
        }, {
          id: 113,
          name: "香蕉"
        }, {
          id: 114,
          name: "香蕉"
        }, {
          id: 115,
          name: "香蕉"
        }, {
          id: 116,
          name: "香蕉"
        }, {
          id: 117,
          name: "香蕉"
        }]
      },
      {
        id: "vegetables",
        name: "蔬菜",
        products: [{
          id: 201,
          name: "土豆"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }, {
          id: 202,
          name: "西红柿"
        }]
      },
      {
        id: "drinks",
        name: "饮料",
        products: [{
          id: 301,
          name: "可乐"
        }, {
          id: 302,
          name: "雪碧"
        }]
      }
    ],
    active: "fruits",
    scrollIntoView: ""
  },

  // 选择左侧分类
  selectCategory(e) {
    const id = e.currentTarget.dataset.id;
    this.setData({
      active: id,
      scrollIntoView: `chunk${id}`
    });
  },

  // 右侧滚动触发
  scroll() {
    const query = wx.createSelectorQuery();
    query.selectAll(".category").boundingClientRect(); // 直接检测整个分类
    query.exec(res => {
      if (!res[0]) return;

      let activeId = this.data.active;

      for (let i = 0; i < res[0].length; i++) {
        // 如果category-title不存在，使用整个category的top值
        if (res[0][i].top <= 0) {
          activeId = this.data.products[i].id;
        }
      }

      // 只有当 active 发生变化时才更新，减少 setData 频率
      if (activeId !== this.data.active) {
        this.setData({
          active: activeId
        });
      }
    });
  }



});