京东NutUI商品分类组件：3分钟搞定电商分类页面

京东NutUI商品分类组件：3分钟搞定电商分类页面

【免费下载链接】nutui 京东风格的移动端 Vue2、Vue3 组件库 、支持多端小程序(A Vue.js UI Toolkit for Mobile Web) 项目地址: https://gitcode.com/gh_mirrors/nu/nutui

还在为电商App的商品分类页面发愁？京东NutUI的分类组件Category与CategoryPane让你轻松构建专业的分类导航界面，完美复刻京东购物体验！

通过本文你将掌握：

• Category组件的基础用法与核心配置
• CategoryPane的详细商品展示技巧
• 两大组件联动的最佳实践
• 移动端适配与性能优化方案

Category组件：分类导航骨架

Category组件是分类页面的左侧导航栏，负责展示一级分类目录：

<template>
  <nut-category 
    :category="categoryList" 
    @change="handleCategoryChange"
  />
</template>

<script>
export default {
  data() {
    return {
      categoryList: [
        { id: 1, name: '手机数码' },
        { id: 2, name: '电脑办公' },
        { id: 3, name: '家用电器' }
      ]
    }
  },
  methods: {
    handleCategoryChange(item) {
      console.log('选中分类:', item)
    }
  }
}
</script>

核心属性配置：

• category: 分类数据数组，支持树形结构
• v-model: 双向绑定的选中项
• @change: 分类切换事件回调

CategoryPane组件：商品展示区

CategoryPane用于展示右侧的商品列表，支持多种布局方式：

<template>
  <nut-category-pane 
    :pane="currentProducts"
    :custom="true"
  >
    <template #default="{ item }">
      <div class="product-item">
        <img :src="item.image" />
        <p>{{ item.name }}</p>
        <span class="price">¥{{ item.price }}</span>
      </div>
    </template>
  </nut-category-pane>
</template>

组件联动实战

实现Category与CategoryPane的完美联动：

<template>
  <div class="category-page">
    <nut-category 
      v-model="activeCategory" 
      :category="categories"
      @change="loadProducts"
    />
    
    <nut-category-pane 
      :pane="products"
      :loading="loading"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeCategory: null,
      categories: [],
      products: [],
      loading: false
    }
  },
  async mounted() {
    await this.loadCategories()
  },
  methods: {
    async loadCategories() {
      // 加载分类数据
      this.categories = await api.getCategories()
      this.activeCategory = this.categories[0]?.id
      this.loadProducts(this.activeCategory)
    },
    async loadProducts(categoryId) {
      this.loading = true
      this.products = await api.getProducts(categoryId)
      this.loading = false
    }
  }
}
</script>

样式定制与主题适配

NutUI提供丰富的主题变量，轻松定制分类样式：

.nut-category {
  --category-item-height: 48px;
  --category-item-color: #333;
  --category-item-active-color: #e93b3b;
}

.nut-category-pane {
  --pane-padding: 12px;
  --pane-bg-color: #f5f5f5;
}

多端适配技巧

针对不同端优化分类体验：

H5端优化：

<nut-category 
  :scrollable="true"
  :offset-top="50"
/>

小程序端适配：

<nut-category 
  :custom-style="{ height: '100vh' }"
  :safe-area-inset-bottom="true"
/>

性能优化建议

1. 数据分页加载：分类商品数量多时采用分页
2. 图片懒加载：使用NutUI的LazyLoad组件
3. 缓存策略：本地缓存已加载的分类数据
4. 虚拟滚动：超长列表使用虚拟滚动优化

<nut-category-pane 
  :pane="products"
  :infinite-loading="true"
  @loadmore="loadMoreProducts"
/>

最佳实践总结

• 使用v-model管理选中状态，避免直接操作DOM
• 合理使用插槽自定义商品展示样式
• 大数据量时启用分页和虚拟滚动
• 移动端注意触摸事件和滚动体验
• 遵循京东设计规范，保持视觉统一

通过NutUI的Category和CategoryPane组件，你可以快速构建出专业级的电商分类页面，提升用户购物体验！

官方文档：src/packages/__VUE/category/doc.md 组件演示：src/packages/__VUE/category/demo.vue

立即尝试NutUI分类组件，让你的电商应用拥有京东级别的分类体验！

【免费下载链接】nutui 京东风格的移动端 Vue2、Vue3 组件库 、支持多端小程序(A Vue.js UI Toolkit for Mobile Web) 项目地址: https://gitcode.com/gh_mirrors/nu/nutui