uni-app如何做个两级分类-uni-app-PHP中文网

uni-app如何做个两级分类

看不見的法師

发布： 2025-10-19 21:19:01

原创

294人浏览过

在uni-app中实现两级分类系统可以通过前后端配合完成。1. 后端提供分类数据结构。2. 前端使用<scroll-view>和<view>设计ui，实现左右滑动的分类列表。3. 通过vue响应式系统更新ui，考虑性能优化和用户体验。

uni-app如何做个两级分类

最近有朋友问我，如何在uni-app中实现一个两级分类系统。说实话，这种需求在很多项目中都挺常见的，尤其是在电商、内容分类等场景下。让我来分享一下我的思路和实现方法吧。

首先，我们得明确一下什么是两级分类。简单来说，就是一个大类下面有多个小类，比如“电子产品”下面有“手机”、“电脑”、“平板”等。这样设计不仅能让用户更容易找到自己需要的分类，还能提高应用的用户体验。

在uni-app中实现这个功能，主要是通过前端和后端的配合来完成的。我们先从数据结构开始说起吧。假设我们的后端提供了一个API，返回的是这样一个数据结构：

[
  {
    "id": 1,
    "name": "电子产品",
    "children": [
      {"id": 11, "name": "手机"},
      {"id": 12, "name": "电脑"},
      {"id": 13, "name": "平板"}
    ]
  },
  {
    "id": 2,
    "name": "家居用品",
    "children": [
      {"id": 21, "name": "家具"},
      {"id": 22, "name": "装饰"}
    ]
  }
]

登录后复制

有了这个数据，我们就可以开始设计前端的UI和交互逻辑了。在uni-app中，我们可以使用<scroll-view>和<view>来实现一个可以滑动的分类列表。下面是一个简单的示例代码：

DeepSeek App

DeepSeek官方推出的AI对话助手App

查看详情

<template>
  <view class="category-container">
    <scroll-view scroll-y class="left-panel">
      <view 
        v-for="(item, index) in categories" 
        :key="item.id" 
        :class="['left-item', currentIndex === index ? 'active' : '']"
        @click="selectCategory(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view scroll-y class="right-panel">
      <view 
        v-for="subItem in currentSubCategories" 
        :key="subItem.id" 
        class="right-item"
        @click="selectSubCategory(subItem)"
      >
        {{ subItem.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [], // 分类数据
      currentIndex: 0, // 当前选中的大类索引
      currentSubCategories: [] // 当前选中的大类下的小类
    };
  },
  methods: {
    // 初始化分类数据
    async initCategories() {
      const res = await uni.request({
        url: '你的API地址',
        method: 'GET'
      });
      this.categories = res.data;
      this.currentSubCategories = this.categories[0].children;
    },
    // 选择大类
    selectCategory(index) {
      this.currentIndex = index;
      this.currentSubCategories = this.categories[index].children;
    },
    // 选择小类
    selectSubCategory(subItem) {
      console.log('选中的小类:', subItem.name);
      // 这里可以添加跳转到具体分类页面的逻辑
    }
  },
  onLoad() {
    this.initCategories();
  }
};
</script>

<style>
.category-container {
  display: flex;
  height: 100vh;
}

.left-panel {
  width: 200rpx;
  background-color: #f5f5f5;
}

.left-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.left-item.active {
  background-color: #e5e5e5;
}

.right-panel {
  flex: 1;
}

.right-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #e5e5e5;
}
</style>

登录后复制

这个代码实现了一个左右滑动的两级分类界面，左边是大类，右边是选中大类后对应的小类。当用户点击左边的大类时，右边会动态更新显示对应的子类。

当然，实现这个功能时也有一些需要注意的地方：