微信小程序左右分类栏制作代码

下面是微信小程序左右分类栏制作代码示例，供参考：

1. 在 WXML 文件中添加以下代码：

<view class="tab-container">
  <view class="tab-item {{currentTab === 'left' ? 'active' : ''}}" bindtap="switchTab" data-tab="left">左侧分类</view>
  <view class="tab-item {{currentTab === 'right' ? 'active' : ''}}" bindtap="switchTab" data-tab="right">右侧分类</view>
</view>

<view class="content-container">
  <!-- 左侧内容 -->
  <view wx:if="{{currentTab === 'left'}}">
    <!-- 左侧分类内容 -->
  </view>

  <!-- 右侧内容 -->
  <view wx:if="{{currentTab === 'right'}}">
    <!-- 右侧分类内容 -->
  </view>
</view>

2. 在 WXSS 文件中添加以下样式：

.tab-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60rpx;
  background-color: #fff;
}

.tab-item {
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 20rpx;
  border-bottom: 2rpx solid transparent;
}

.tab-item.active {
  color: #333;
  border-bottom-color: #333;
}

.content-container {
  height: calc(100vh - 60rpx);
  overflow-y: auto;
}

3. 在 JS 文件中添加以下代码：

Page({
  data: {
    currentTab: 'left' // 当前选中的分类
  },

  // 切换分类
  switchTab: function(e) {
    const tab = e.currentTarget.dataset.tab;
    this.setData({
      currentTab: tab
    });
  }
})

这样就可以实现简单的左右分类栏了。