京东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