微信小程序菜单栏横向滑动

要实现微信小程序菜单栏横向滑动，可以使用scroll-view组件。以下是实现步骤：

1. 在wxml文件中，使用scroll-view组件包裹菜单栏。设置scroll-x属性为true，表示横向滑动。

<scroll-view class="menu" scroll-x="true">
  <view class="menu-item">菜单项1</view>
  <view class="menu-item">菜单项2</view>
  <view class="menu-item">菜单项3</view>
  <view class="menu-item">菜单项4</view>
  <view class="menu-item">菜单项5</view>
</scroll-view>

2. 在wxss文件中，设置scroll-view和菜单项的样式。

.menu {
  white-space: nowrap;  /* 防止菜单项换行 */
  overflow-x: auto;  /* 横向滑动 */
  -webkit-overflow-scrolling: touch;  /* iOS平台优化 */
}

.menu-item {
  display: inline-block;  /* 菜单项横向排列 */
  padding: 10rpx 20rpx;  /* 菜单项样式 */
}

3. 在js文件中，为菜单项添加点击事件。

Page({
  onTapMenuItem: function(event) {
    console.log(event.currentTarget.dataset.index);  /* 获取菜单项索引 */
  }
})

4. 在wxml文件中，为菜单项绑定点击事件。

<scroll-view class="menu" scroll-x="true">
  <view class="menu-item" bindtap="onTapMenuItem" data-index="0">菜单项1</view>
  <view class="menu-item" bindtap="onTapMenuItem" data-index="1">菜单项2</view>
  <view class="menu-item" bindtap="onTapMenuItem" data-index="2">菜单项3</view>
  <view class="menu-item" bindtap="onTapMenuItem" data-index="3">菜单项4</view>
  <view class="menu-item" bindtap="onTapMenuItem" data-index="4">菜单项5</view>
</scroll-view>

这样就可以实现微信小程序菜单栏横向滑动了。