小程序sidebar实现代码

小程序的 sidebar 一般可以通过使用 `scroll-view` 和 `view` 组件来实现，以下是一个简单的实现代码：

<scroll-view scroll-x="true" class="sidebar">
  <view wx:for="{{items}}" wx:key="{{index}}" class="sidebar-item {{index===activeIndex?'active':''}}" data-index="{{index}}" bindtap="handleTap">{{item}}</view>
</scroll-view>

Page({
  data: {
    items: ['菜单一', '菜单二', '菜单三', '菜单四', '菜单五'],
    activeIndex: 0 // 默认选中第一个菜单
  },
  handleTap(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      activeIndex: index
    });
  }
})

需要注意的是，在 CSS 样式中需要指定 `scroll-view` 的宽度为固定值，以便实现横向滚动：

.sidebar {
  white-space: nowrap;
  width: 100%;
}

.sidebar-item {
  display: inline-block;
  padding: 10rpx;
  font-size: 14rpx;
  color: #999;
}

.sidebar-item.active {
  color: #333;
  background-color: #f5f5f5;
}