uniapp顶部分类菜单

UniApp 中可以通过使用 `uni-swiper` 和 `uni-segmented-control` 组件来实现一个顶部分类菜单。具体步骤如下：

1. 首先，在页面中添加一个 `uni-swiper` 组件，用于显示分类菜单的各个选项卡。

<template>
  <view>
    <uni-swiper :current="current" :duration="300" @change="swiperChange">
      <uni-swiper-item v-for="(item, index) in categoryList" :key="index">
        {{item.title}}
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>

2. 接着，在页面中添加一个 `uni-segmented-control` 组件，用于显示当前选中的选项卡。

<template>
  <view>
    <uni-swiper :current="current" :duration="300" @change="swiperChange">
      <uni-swiper-item v-for="(item, index) in categoryList" :key="index">
        {{item.title}}
      </uni-swiper-item>
    </uni-swiper>
    <uni-segmented-control :current="current" :values="categoryList.map(item => item.title)" @change="segmentedChange"></uni-segmented-control>
  </view>
</template>

3. 在页面的 `<script>` 标签中，定义 `current` 变量来保存当前选中的选项卡索引，并且在 `swiperChange` 和 `segmentedChange` 方法中更新它。

<script>
  export default {
    data() {
      return {
        current: 0,
        categoryList: [
          {title: '分类1'},
          {title: '分类2'},
          {title: '分类3'},
          {title: '分类4'},
          {title: '分类5'},
        ],
      }
    },
    methods: {
      swiperChange(e) {
        this.current = e.detail.current
      },
      segmentedChange(e) {
        this.current = e.detail.index
      },
    },
  }
</script>

这样，一个简单的顶部分类菜单就完成了。你可以根据实际需求来修改选项卡的样式和内容。