uniapp分类菜单

实现UniApp分类菜单的方法

使用uni-ui的uni-list组件 在UniApp中可以通过uni-ui提供的组件快速实现分类菜单效果。安装uni-ui后，在pages.json中引入组件：

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
  }
}

页面模板中使用：

<uni-list>
  <uni-list-item title="食品分类" showArrow />
  <uni-list-item title="电子产品" showArrow />
  <uni-list-item title="服装配饰" showArrow>
    <template v-slot:footer>
      <uni-tag text="热销" type="error" />
    </template>
  </uni-list-item>
</uni-list>

自定义侧边栏分类 通过flex布局实现左右分栏的经典分类菜单：

<view class="menu-container">
  <scroll-view scroll-y class="left-menu">
    <view 
      v-for="(item,index) in categories" 
      :key="index"
      :class="['menu-item', activeIndex===index?'active':'']"
      @click="changeCategory(index)">
      {{item.name}}
    </view>
  </scroll-view>

  <scroll-view scroll-y class="right-content">
    <view v-for="sub in subCategories" :key="sub.id">
      <text class="sub-title">{{sub.name}}</text>
      <view class="goods-list">
        <!-- 商品项循环 -->
      </view>
    </view>
  </scroll-view>
</view>

对应CSS样式：

.menu-container {
  display: flex;
  height: 100vh;
}
.left-menu {
  width: 25%;
  background: #f8f8f8;
}
.menu-item {
  padding: 20rpx;
  text-align: center;
  &.active {
    color: #ff5500;
    background: #fff;
    border-left: 4rpx solid #ff5500;
  }
}
.right-content {
  width: 75%;
  padding: 20rpx;
}

数据绑定处理 在script部分处理分类数据交互：

export default {
  data() {
    return {
      categories: [
        {id:1, name:'生鲜食品'},
        {id:2, name:'数码家电'},
        {id:3, name:'美妆个护'}
      ],
      activeIndex: 0,
      subCategories: []
    }
  },
  methods: {
    changeCategory(index) {
      this.activeIndex = index
      // 模拟获取子分类
      this.subCategories = this.getSubCategories(this.categories[index].id)
    },
    getSubCategories(parentId) {
      // 实际项目中应调用接口获取数据
      const mockData = {
        1: [
          {id:11, name:'新鲜水果'},
          {id:12, name:'海鲜水产'}
        ],
        2: [
          {id:21, name:'手机通讯'},
          {id:22, name:'电脑配件'}
        ]
      }
      return mockData[parentId] || []
    }
  }
}

添加交互效果 增强用户体验的交互方案：

// 在onLoad中初始化数据
onLoad() {
  this.changeCategory(0)
  // 或者调用接口获取分类数据
  uni.request({
    url: 'https://api.example.com/categories',
    success: (res) => {
      this.categories = res.data
    }
  })
}

优化性能的方案 对于大量分类数据的情况：

// 使用计算属性避免重复计算
computed: {
  currentSubCategories() {
    return this.getSubCategories(this.categories[this.activeIndex]?.id)
  }
}

注意事项

• 滚动区域需要设置固定高度
• 小程序端scroll-view组件必须指定高度
• 分类数据量大时可考虑分页加载
• H5端注意处理滚动穿透问题

以上方案可根据实际项目需求进行组合或调整，uni-ui提供了丰富的组件可以快速构建分类界面，而自定义方案则具有更高的灵活性。