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

下面是微信小程序左右分类栏的代码示例：

<view class="container">
  <view class="left">
    <scroll-view scroll-y="{{true}}" scroll-into-view="{{scrollIntoView}}" scroll-with-animation="{{true}}" bindscroll="scrollLeft" style="height:{{winHeight}}px;">
      <view class="left-item" wx:for="{{leftList}}" wx:key="index" data-index="{{index}}" bindtap="switchRightTab">{{item}}</view>
    </scroll-view>
  </view>
  <view class="right">
    <scroll-view scroll-y="{{true}}" scroll-into-view="{{scrollIntoView}}" scroll-with-animation="{{true}}" bindscroll="scrollRight" style="height:{{winHeight}}px;">
      <view class="right-item" wx:for="{{rightList}}" wx:key="index">{{item}}</view>
    </scroll-view>
  </view>
</view>

Page({
  data: {
    winHeight: 0,
    scrollIntoView: '',
    leftList: ['分类1', '分类2', '分类3', '分类4'],
    rightList: [
      ['分类1-内容1', '分类1-内容2', '分类1-内容3'],
      ['分类2-内容1', '分类2-内容2', '分类2-内容3'],
      ['分类3-内容1', '分类3-内容2', '分类3-内容3'],
      ['分类4-内容1', '分类4-内容2', '分类4-内容3']
    ]
  },
  onLoad: function () {
    const that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winHeight: res.windowHeight
        });
      }
    });
  },
  switchRightTab: function (e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      scrollIntoView: 'item' + index,
      currentLeft: index
    });
  },
  scrollLeft: function (e) {
    console.log(e);
  },
  scrollRight: function (e) {
    console.log(e);
  }
});

CSS 样式：

.container {
  display: flex;
  height: 100%;
}

.left {
  width: 25%;
  background-color: #f2f2f2;
  border-right: 1rpx solid #ccc;
}

.left-item {
  padding: 10rpx;
  font-size: 32rpx;
  text-align: center;
  cursor: pointer;
}

.right {
  width: 75%;
  padding: 10rpx;
}

.right-item {
  height: 200rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 5rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

其中，左侧分类栏使用 `scroll-view` 实现滚动效果，右侧内容区使用 `wx:for` 循环渲染数据。通过 `scroll-into-view` 属性和 `bindtap` 方法实现左右联动效果。