更新记录

1.0.0（2025-03-02） 下载此版本

无

平台兼容性

侧边分类联动导航

介绍

side-category-nav 是一个用于展示分类和商品列表的 Vue 组件，支持左侧分类导航与右侧商品列表的联动滚动。该组件适用于电商平台、商品展示页面等场景。

特性

• 左侧分类导航，支持点击切换
• 右侧商品列表，支持懒加载图片
• 分类与商品列表联动滚动
• 支持 TypeScript 类型定义

使用示例

引入组件

在您的 Vue 组件中引入 side-category-nav：

<template>
  <side-category-nav :categories="categories" @add-to-cart="handleAddToCart" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import SideCategoryNav from '@/uni_modules/side-category-nav/components/side-category-nav/side-category-nav.vue'

const categories = ref([
  {
    id: 1,
    name: '分类1',
    products: [
      {
        id: 'p1',
        name: '商品1',
        description: '描述1',
        price: 100,
        originalPrice: 120,
        image: 'image1.jpg',
      },
      {
        id: 'p2',
        name: '商品2',
        description: '描述2',
        price: 200,
        originalPrice: 220,
        image: 'image2.jpg',
      },
    ],
  },
  {
    id: 2,
    name: '分类2',
    products: [
      {
        id: 'p3',
        name: '商品3',
        description: '描述3',
        price: 300,
        originalPrice: 320,
        image: 'image3.jpg',
      },
    ],
  },
])

const handleAddToCart = (product) => {
  console.log('添加到购物车:', product)
}
</script>

组件属性

• categories (Array): 分类数据，包含每个分类的 id、name 和 products 数组。
• 事件 add-to-cart: 当用户点击添加到购物车时触发，返回被添加的商品对象。

依赖

• Vue 3
• TypeScript

贡献

欢迎提交问题和功能请求。

许可证

MIT