uniapp顶部分类菜单

在uni-app中，你可以使用uni-ui组件库中的mescroll-uni来实现顶部分类菜单的效果。具体步骤如下：

1. 安装uni-ui组件库

在HBuilderX中，点击工具栏上的“插件市场”，搜索并安装uni-ui组件库。

2. 引入mescroll-uni组件

在需要使用顶部分类菜单的页面中，通过以下代码引入mescroll-uni组件：

<template>
  <view>
    <!-- mescroll-uni组件 -->
    <mescroll-uni :up="upOption" :down="downOption">
      <!-- 内容区域 -->
    </mescroll-uni>
  </view>
</template>

<script>
  import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni.vue'

  export default {
    components: {
      MescrollUni
    }
  }
</script>

3. 配置mescroll-uni组件

在页面的script标签中，配置mescroll-uni组件的选项，其中包括顶部分类菜单的数据和事件处理函数。示例代码如下：

<script>
  export default {
    data() {
      return {
        // 顶部分类菜单数据
        tabs: [{
          id: 1,
          name: '分类1'
        }, {
          id: 2,
          name: '分类2'
        }, {
          id: 3,
          name: '分类3'
        }],
        // 当前选中的分类菜单索引
        activeIndex: 0
      }
    },
    methods: {
      // 顶部分类菜单切换事件处理函数
      onTabClick(index) {
        this.activeIndex = index
        // 刷新数据
        this.$refs.mescrollUni.refresh()
      },
      // 上拉加载数据
      loadMore() {
        // 加载数据的逻辑
      },
      // 下拉刷新数据
      refresh() {
        // 刷新数据的逻辑
      }
    },
    computed: {
      // mescroll-uni组件的up选项
      upOption() {
        return {
          callback: this.loadMore
        }
      },
      // mescroll-uni组件的down选项
      downOption() {
        return {
          isBoth: true,
          auto: true,
          callback: this.refresh
        }
      }
    }
  }
</script>

4. 渲染顶部分类菜单

在mescroll-uni组件中添加顶部分类菜单的HTML结构和事件绑定，示例代码如下：

<template>
  <view>
    <!-- 顶部分类菜单 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{active: activeIndex === index}" v-for="(tab, index) in tabs" :key="tab.id" @click="onTabClick(index)">
        {{tab.name}}
      </view>
    </view>
    <!-- mescroll-uni组件 -->
    <mescroll-uni :up="upOption" :down="downOption">
      <!-- 内容区域 -->
    </mescroll-uni>
  </view>
</template>

<style>
  .tab-bar {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 10rpx;
    border-bottom: 1rpx solid #e5e5e5;
  }
  .tab-item {
    font-size: 28rpx;
    color: #333;
    padding: 10rpx;
    border-radius: 10rpx;
    transition: all .3s ease;
  }
  .tab-item.active {
    background-color: #f5f5f5;
    color: #ff7f50;
  }
</style>

通过以上步骤，你就可以在uni-app中实现一个顶部分类菜单的效果。