当前位置：首页 > uni-app

uniapp分类信息

2026-02-06 04:35:15uni-app

uniapp分类信息开发指南

数据结构设计

分类信息通常采用树形结构存储，核心字段包括分类ID、父分类ID、分类名称、排序权重等。数据库表设计可参考以下SQL：

CREATE TABLE `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) DEFAULT 0 COMMENT '父级ID',
  `name` varchar(50) NOT NULL COMMENT '分类名称',
  `icon` varchar(255) DEFAULT NULL COMMENT '图标URL',
  `sort` int(11) DEFAULT 0 COMMENT '排序权重',
  `status` tinyint(1) DEFAULT 1 COMMENT '状态',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

前端页面实现

在uniapp中通过<scroll-view>和<view>组件实现分类导航，左侧为一级分类，右侧展示子分类：

uniapp分类信息

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

  <scroll-view scroll-y class="right-content">
    <block v-for="sub in subCategories" :key="sub.id">
      <view class="sub-title">{{sub.name}}</view>
      <view class="sub-items">
        <view 
          v-for="child in sub.children" 
          :key="child.id"
          class="sub-item">
          <image :src="child.icon" mode="aspectFit"/>
          <text>{{child.name}}</text>
        </view>
      </view>
    </block>
  </scroll-view>
</view>

数据交互逻辑

通过uni.request获取分类数据，建议加入缓存机制减少请求次数：

export default {
  data() {
    return {
      categories: [],
      subCategories: [],
      activeIndex: 0
    }
  },
  onLoad() {
    this.loadCategories()
  },
  methods: {
    async loadCategories() {
      const res = await uni.request({
        url: '/api/category/tree',
        method: 'GET'
      })
      this.categories = res.data
      if(this.categories.length > 0){
        this.subCategories = this.categories[0].children || []
      }
    },
    changeCategory(index){
      this.activeIndex = index
      this.subCategories = this.categories[index].children || []
    }
  }
}

样式优化建议

使用flex布局实现响应式效果，注意处理滚动区域高度：

uniapp分类信息

.container {
  display: flex;
  height: 100vh;
}
.left-menu {
  width: 25%;
  background-color: #f8f8f8;
}
.right-content {
  width: 75%;
  padding: 10px;
}
.menu-item {
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
}
.active {
  color: #ff5500;
  background-color: #fff;
}
.sub-items {
  display: flex;
  flex-wrap: wrap;
}
.sub-item {
  width: 33.33%;
  text-align: center;
  padding: 10px 0;
}

性能优化方案

使用虚拟列表技术处理大量分类数据
实现本地缓存策略，通过uni.setStorage存储分类数据
图片资源使用CDN加速并添加懒加载
服务端采用gzip压缩传输数据

扩展功能实现

分类信息可结合搜索功能，在页面顶部添加搜索栏：

<view class="search-box">
  <uni-search-bar 
    placeholder="搜索分类" 
    @confirm="searchCategory"
    cancelButton="none">
  </uni-search-bar>
</view>

实现搜索方法需注意防抖处理：

let timer = null
methods: {
  searchCategory(e){
    clearTimeout(timer)
    timer = setTimeout(() => {
      uni.request({
        url: '/api/category/search',
        data: { keyword: e.value },
        success: (res) => {
          this.searchResult = res.data
        }
      })
    }, 500)
  }
}