🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 分类页面说明 注意:分类样式是在4.2.30版本更改,需要前端也是该版本之后重新上传 查看设置位置: ![](https://img.kancloud.cn/7d/2e/7d2eaa1c46f092f656e84d1c21342cad_1662x864.png) # 一级分类样式4种: ## 1.一级分类样式-小图标样式(不显示商品) ![](https://img.kancloud.cn/8f/e5/8fe5aea5dffda88dc2dd8cb1669d0d51_378x608.png) ![](https://img.kancloud.cn/8c/32/8c32d1c25ec12322c3a561678e564ed6_684x798.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id,则显示所有一级分类的小图标; #### 2.当填写了一级分类id ![](https://img.kancloud.cn/cd/f3/cdf3b7026258248ade586f866ac71e1c_1671x698.png) 则显示该一级分类下面的二级分类的小图标 #### 3.当填写二级分类id ![](https://img.kancloud.cn/55/0d/550db9748b172a6a0fc6d50fb2b67556_1678x783.png) 则显示该二级分类下面的三级分类的小图标 #### 4.不支持填写三级分类id ## 2.一级分类样式-大图标样式(不显示商品) ![](https://img.kancloud.cn/67/d2/67d29890162ecd5be10a6dbdfa56ec51_377x603.png) ![](https://img.kancloud.cn/92/31/923173a7613033095b3af88dba208d10_946x817.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id,则显示所有一级分类的大图标; #### 2.当填写了一级分类id ![](https://img.kancloud.cn/cd/f3/cdf3b7026258248ade586f866ac71e1c_1671x698.png) 则显示该一级分类下面的二级分类的大图标 #### 3.当填写二级分类id ![](https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png) 则显示该二级分类下面的三级分类的大图标 #### 4.不支持填写三级分类id ## 3.一级分类中的商品列表样式(顶栏&显示商品) ![](https://img.kancloud.cn/2c/53/2c53a674f9649f6650566216d27d3038_395x643.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id, ![](https://img.kancloud.cn/0b/f5/0bf5bc27c7b96fa87a5d03354493c0c4_404x74.png) 这里显示所有一级分类的名称, 下面显示对应分类下面的商品 #### 2.当填写了一级分类id ![](https://img.kancloud.cn/cd/f3/cdf3b7026258248ade586f866ac71e1c_1671x698.png) ![](https://img.kancloud.cn/0b/f5/0bf5bc27c7b96fa87a5d03354493c0c4_404x74.png) 这里显示填写的一级分类下面的二级分类名称 下面显示对应的二级分类商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png) ![](https://img.kancloud.cn/0b/f5/0bf5bc27c7b96fa87a5d03354493c0c4_404x74.png) 这里显示对应的二级分类下面的三级分类的名称; 下面显示对应的三级分类的商品; #### 4.当填写三级分类id 之间显示对应三级分类的商品; ## 4.一级分类中的商品列表样式(左侧栏&显示商品) ![](https://img.kancloud.cn/cd/68/cd68ff11c7064e0c3057ffbe737119a9_360x578.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id, ![](https://img.kancloud.cn/7c/23/7c2328322a005a673bd3cf085d2a4e99_97x432.png) 这里显示所有一级分类的名称, 右面显示对应分类下面的商品 #### 2.当填写了一级分类id ![](https://img.kancloud.cn/cd/f3/cdf3b7026258248ade586f866ac71e1c_1671x698.png) ![](https://img.kancloud.cn/7c/23/7c2328322a005a673bd3cf085d2a4e99_97x432.png) 这里显示填写的一级分类下面的二级分类名称 右面显示对应的二级分类商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png) ![](https://img.kancloud.cn/7c/23/7c2328322a005a673bd3cf085d2a4e99_97x432.png) 这里显示对应的二级分类下面的三级分类的名称; 右面显示对应的三级分类的商品; #### 4.当填写三级分类id 之间显示对应三级分类的商品; # 二级分类样式四种: ## 1.二级分类中的小图标样式(不显示商品): ![](https://img.kancloud.cn/cd/68/cd68ff11c7064e0c3057ffbe737119a9_360x578.png) #### 1.当不填写分类id: 左边显示一级分类的名称 右边显示对应的二级分类的小图标; #### 2.当填写一级分类id 左边显示对应的一级分类下面的二级分类名称 右边显示二级分类下面的三级分类的小图标 #### 3.当填写二级分类id 左边显示二级分类下面的三级分类名称 右边为空 #### 4.不支持填写三级分类id ## 2.二级分类中的大图标样式(不显示商品): ![](https://img.kancloud.cn/63/a2/63a296709e4d5b5f0938bff3e9bb1b22_344x563.png) #### 1.当不填写分类id: 左边显示一级分类的名称 右边显示对应的二级分类的大图标; #### 2.当填写一级分类id 左边显示对应的一级分类下面的二级分类名称 右边显示二级分类下面的三级分类的大图标 #### 3.当填写二级分类id 左边显示二级分类下面的三级分类名称 右边为空 #### 4.不支持填写三级分类id ## 3..二级分类中的商品列表样式(顶栏&显示商品) ![](https://img.kancloud.cn/d6/e9/d6e9f876840322efd80b6d383147bd79_355x587.png) #### 1.当不填写分类id: ![](https://img.kancloud.cn/61/42/6142a33027ba9a0d5caaedfc64e76a13_306x51.png) 第一层显示一级分类名称 ![](https://img.kancloud.cn/da/f7/daf75b62efdb47ad52c321a801779050_297x73.png) 第二层显示二级分类名称 下面显示二级分类对应的商品 #### 2.当填写一级分类id ![](https://img.kancloud.cn/61/42/6142a33027ba9a0d5caaedfc64e76a13_306x51.png) 第一层显示该一级分类下面的二级分类的名称 ![](https://img.kancloud.cn/da/f7/daf75b62efdb47ad52c321a801779050_297x73.png) 第二层显示三级分类名称 下面显示三级分类对应的商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/61/42/6142a33027ba9a0d5caaedfc64e76a13_306x51.png) 第一层显示该一级分类下面的三级分类的名称 没有第二层 下面显示三级分类的商品 #### 4.当填写三级分类id 直接显示三级分类商品 ## 4..二级分类中的商品列表样式(侧栏&显示商品) ![](https://img.kancloud.cn/24/b0/24b027ed153fa1d13d7e508b49e46f30_347x567.png) #### 1.当不填写分类id: ![](https://img.kancloud.cn/b7/17/b717fb22892c723f188ec4d123d32e38_89x408.png) 第一层显示一级分类名称 ![](https://img.kancloud.cn/da/f7/daf75b62efdb47ad52c321a801779050_297x73.png) 第二层显示二级分类名称 下面显示二级分类对应的商品 #### 2.当填写一级分类id ![](https://img.kancloud.cn/61/42/6142a33027ba9a0d5caaedfc64e76a13_306x51.png) 左侧显示该一级分类下面的二级分类的名称 ![](https://img.kancloud.cn/d7/37/d7374cebe5ddf0fb0ace345e1e97971d_237x62.png) 这里显示三级分类名称 右下显示三级分类对应的商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/61/42/6142a33027ba9a0d5caaedfc64e76a13_306x51.png) 左侧显示该一级分类下面的三级分类的名称 右下显示三级分类的商品 #### 4.当填写三级分类id 直接显示三级分类商品 # 三级分类样式三种: 填不填分类id都是直接显示所有三级分类。固定样式不变 ![](https://img.kancloud.cn/1f/24/1f241c5b9060cd56227a3ffb47a1bea4_1081x581.png)