uniapp滑动切换菜单栏

在uniapp中实现滑动切换菜单栏可以使用scroll-view组件和v-for指令来实现。下面是一个示例代码：

<template>
  <view>
    <scroll-view class="menu" scroll-x>
      <view v-for="(item, index) in menuList" :key="index" class="menu-item" :class="{ active: currentIndex === index }" @tap="changeMenu(index)">
        {{ item }}
      </view>
    </scroll-view>
    <view class="content">
      <!-- 根据currentIndex显示对应的内容 -->
      <view v-for="(item, index) in contentList" :key="index" v-show="currentIndex === index">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: ['菜单1', '菜单2', '菜单3'], // 菜单列表
      contentList: ['内容1', '内容2', '内容3'], // 内容列表
      currentIndex: 0 // 当前选中的菜单索引
    };
  },
  methods: {
    changeMenu(index) {
      this.currentIndex = index; // 切换菜单时更新currentIndex
    }
  }
};
</script>

<style>
.menu {
  white-space: nowrap;
  display: flex;
  overflow-x: scroll;
}

.menu-item {
  padding: 10px;
  font-size: 16px;
}

.menu-item.active {
  color: red;
}

.content {
  margin-top: 20px;
  padding: 10px;
  font-size: 18px;
}
</style>

在上面的代码中，我们使用了scroll-view组件来实现菜单栏的横向滑动效果。通过v-for指令遍历菜单列表和内容列表，并根据currentIndex来控制显示对应的内容。通过@tap事件监听菜单项的点击事件，切换菜单时更新currentIndex的值。

你可以根据自己的需求修改菜单列表和内容列表的数据，以及样式。