微信小程序开发制作左右联动分类栏代码

以下是一个简单的微信小程序左右联动分类栏的示例代码：

WXML 文件：

<scroll-view class="scroll-view" scroll-x="true">
  <view class="tab-container">
    <view class="tab-item" wx:for="{{categories}}" wx:key="id"
     bindtap="onCategoryTap" data-id="{{item.id}}"
     class="{{item.id == currentCategoryId ? 'active' : ''}}">
      {{item.name}}
    </view>
  </view>
</scroll-view>
<view class="product-list">
  <view class="product-item" wx:for="{{products}}" wx:key="id">
    <image class="product-image" src="{{item.image}}"></image>
    <text class="product-name">{{item.name}}</text>
    <text class="product-price">{{item.price}}</text>
  </view>
</view>

JS 文件：

Page({
  data: {
    categories: [], // 所有分类的数组
    products: [], // 当前分类下的商品数组
    currentCategoryId: null // 当前选中的分类 ID
  },

  onLoad: function () {
    // 从服务器获取分类数据并解析成数组
    const categories = [
      { id: 1, name: '分类1' },
      { id: 2, name: '分类2' },
      { id: 3, name: '分类3' },
      { id: 4, name: '分类4' }
    ];
    this.setData({ categories });

    // 默认选中第一个分类
    const currentCategoryId = categories[0].id;
    this.setData({ currentCategoryId });

    // 加载第一个分类下的商品列表
    this.loadProductList(currentCategoryId);
  },

  // 点击分类选项卡时触发的事件处理函数
  onCategoryTap: function (event) {
    const categoryId = event.currentTarget.dataset.id;
    this.setData({ currentCategoryId: categoryId });
    this.loadProductList(categoryId);
  },

  // 加载指定分类 ID 下的商品列表
  loadProductList: function (categoryId) {
    // 从服务器获取商品列表并解析成数组
    const products = [
      { id: 1, name: '商品1', price: '99.00', image: 'http://example.com/1.jpg' },
      { id: 2, name: '商品2', price: '129.00', image: 'http://example.com/2.jpg' },
      { id: 3, name: '商品3', price: '199.00', image: 'http://example.com/3.jpg' }
    ];
    this.setData({ products });
  }
});

CSS 文件：

.scroll-view {
  width: 100%;
  height: 50px;
}

.tab-container {
  display: flex;
  flex-direction: row;
  height: 50px;
}

.tab-item {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #333;
}

.tab-item.active {
  color: #f00;
}

.product-list {
  padding: 10px;
}

.product-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.product-name {
  font-size: 16px;
  color: #333;
}

.product-price {
  font-size: 14px;
  color: #f00;
}

以上代码实现了一个简单的微信小程序左右联动分类栏，具体实现细节可能需要根据需求进行调整。