vue 微信小程序 实现横向滑动菜单

在 Vue 微信小程序中，可以使用 wx-swiper 实现横向滑动菜单。

1. 在页面的 .vue 文件中，添加以下代码：

<view class="swiper">
  <swiper class="swiper-container" indicator-dots="false" autoplay="false" circular="false">
    <swiper-item class="swiper-item" wx:for="{{list}}" wx:key="index">
      <!-- 每个菜单项的内容 -->
      <view class="menu-item">{{item}}</view>
    </swiper-item>
  </swiper>
</view>

2. 在页面的 .vue 文件中，定义列表数据和样式：

data() {
  return {
    list: ['菜单1', '菜单2', '菜单3', '菜单4', '菜单5', '菜单6', '菜单7', '菜单8', '菜单9'],
    currentIndex: 0
  }
},
methods: {
  // 点击菜单项时触发
  onItemClick(index) {
    this.currentIndex = index
  }
}

.swiper {
  height: 60rpx;
  overflow: hidden;
}

.swiper-container {
  height: 100%;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
  color: #333;
}

.menu-item {
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-bottom: 4rpx solid transparent;
}

.menu-item.active {
  border-bottom-color: #007aff;
}

3. 在菜单项的 view 标签中添加点击事件，并绑定 onItemClick 方法：

<view class="menu-item" :class="{active: currentIndex === index}" @tap="onItemClick(index)">{{item}}</view>

这样就可以实现一个简单的横向滑动菜单了。当用户点击菜单项时，菜单项的样式会变成选中状态。可以根据 currentIndex 属性来判断当前选中的菜单项，从而实现相应的逻辑。