更新记录

1.0.0（2025-07-08） 下载此版本

首发 uni-app x 没有测试

平台兼容性

uni-app(4.06)

分类联动组件使用文档

组件概述

这是一个支持多级分类联动的商品展示组件，具有以下特点：

• 左侧一级分类垂直滚动
• 顶部二级分类水平滚动
• 商品列表区域支持上拉加载下一个分类/下拉返回上一个分类
• 分类间联动切换流畅

基本用法

<template>
  <classify 
    :classifyList="classifyData" 
    :height="800"
    @clickGoods="handleGoodsClick"
  />
</template>

<script>
import classify from '@/components/classify.vue'

export default {
  components: { classify },
  data() {
    return {
      classifyData: [
        {
          name: '一级分类1',
          child: [
            {
              name: '二级分类1',
              grandchild: [
                { name: '商品1', img: '/static/1.jpg' },
                { name: '商品2', img: '/static/2.jpg' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleGoodsClick(item, index) {
      console.log('点击商品', item, index)
    }
  }
}
</script>

Props

数据结构说明

classifyList: [
  {
    name: '一级分类名称',
    child: [ // 二级分类
      {
        name: '二级分类名称',
        grandchild: [ // 商品列表
          {
            name: '商品名称',
            img: '商品图片URL',
            // 可扩展其他商品字段
          }
        ]
      }
    ]
  }
]

Events

交互说明

分类切换

1. 点击左侧一级分类，切换主分类
2. 点击顶部二级分类，滚动到对应商品区域
3. 滚动商品列表时，顶部二级分类会自动高亮

手势操作

1. 上拉操作：
   • 当滚动到列表底部时，继续上拉
   • 提示"继续上拉进入下一个分类"
   • 拉到阈值后提示"释放进入下一分类"
   • 释放后自动切换到下一个一级分类
2. 下拉操作：
   • 当滚动到列表顶部时，继续下拉
   • 提示"继续下拉进入上一个分类"
   • 拉到阈值后提示"释放进入上一分类"
   • 释放后自动切换到上一个一级分类

样式定制

组件提供了以下CSS类可供覆盖样式：

/* 左侧一级分类 */
.left-main - 左侧容器
.class-item - 分类项
.class-item-active - 选中状态的分类项

/* 顶部二级分类 */
.child-class-main - 二级分类容器
.child-class-item - 二级分类项
.child-class-item-active - 选中状态的二级分类项

/* 商品列表 */
.goods-list - 商品列表容器
.goods-item - 单个商品项
.goods-img - 商品图片
.goods-name - 商品名称

/* 上拉/下拉提示区域 */
.pull-up-area - 上拉提示容器
.pull-down-area - 下拉提示容器
.pull-up-text/pull-down-text - 提示文字

注意事项

1. 组件高度默认会占满父容器剩余空间
2. 分类数据需要严格按照指定格式提供
3. 图片建议使用固定宽高比，避免列表跳动
4. 在真机上手势操作效果更佳

示例数据

// 完整示例数据
classifyData: [
  {
    name: '手机数码',
    child: [
      {
        name: '智能手机',
        grandchild: [
          { name: 'iPhone 13', img: '/static/phone1.jpg' },
          { name: '小米12', img: '/static/phone2.jpg' }
        ]
      },
      {
        name: '数码配件',
        grandchild: [
          { name: '蓝牙耳机', img: '/static/earphone.jpg' },
          { name: '充电宝', img: '/static/powerbank.jpg' }
        ]
      }
    ]
  },
  {
    name: '家用电器',
    child: [
      {
        name: '大家电',
        grandchild: [
          { name: '冰箱', img: '/static/fridge.jpg' },
          { name: '洗衣机', img: '/static/washer.jpg' }
        ]
      }
    ]
  }
]