🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
注意:分类样式是在4.2.30版本更改,需要前端也是该版本之后重新上传 查看设置位置:![](https://img.kancloud.cn/2b/32/2b32512c085db98edf534cf2e1f6f382_1662x864.png) # 一级分类样式4种: ## 1.一级分类样式-小图标样式(不显示商品) ![](https://img.kancloud.cn/f3/2f/f32fa5045139439ffaa7f051c16b64a8_378x608.png) ![](https://img.kancloud.cn/58/f7/58f776447f750fe3aac4ebd0593a6fe2_684x798.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id,则显示所有一级分类的小图标; #### 2.当填写了一级分类id ![](https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png) 则显示该一级分类下面的二级分类的小图标 #### 3.当填写二级分类id ![](https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png) 则显示该二级分类下面的三级分类的小图标 #### 4.不支持填写三级分类id ## 2.一级分类样式-大图标样式(不显示商品) ![](https://img.kancloud.cn/a7/3f/a73f62cf81d6ec2dd015f3cb8775fccc_377x603.png) ![](https://img.kancloud.cn/d5/11/d5110893298eefa215257f2c9b84b3a3_946x817.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id,则显示所有一级分类的大图标; #### 2.当填写了一级分类id ![](https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png) 则显示该一级分类下面的二级分类的大图标 #### 3.当填写二级分类id ![](https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png) 则显示该二级分类下面的三级分类的大图标 #### 4.不支持填写三级分类id ## 3.一级分类中的商品列表样式(顶栏&显示商品) ![](https://img.kancloud.cn/8b/11/8b117bc60fa5935a9b1765d292885a86_395x643.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id, ![](https://img.kancloud.cn/28/51/28514ffa149fe1001163685f72d59b27_404x74.png) 这里显示所有一级分类的名称, 下面显示对应分类下面的商品 #### 2.当填写了一级分类id ![](https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png) ![](https://img.kancloud.cn/28/51/28514ffa149fe1001163685f72d59b27_404x74.png) 这里显示填写的一级分类下面的二级分类名称 下面显示对应的二级分类商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png) ![](https://img.kancloud.cn/28/51/28514ffa149fe1001163685f72d59b27_404x74.png) 这里显示对应的二级分类下面的三级分类的名称; 下面显示对应的三级分类的商品; #### 4.当填写三级分类id 之间显示对应三级分类的商品; ## 4.一级分类中的商品列表样式(左侧栏&显示商品) ![](https://img.kancloud.cn/5d/41/5d41d51371b97d3fcb40b85f376a95fb_360x578.png) 选中该样式,可以选择填写分类id,会出现不同的效果 #### 1.当没有填写分类id, ![](https://img.kancloud.cn/99/12/9912c20c3dfe2ed38b0bc3ee08b70d3f_97x432.png) 这里显示所有一级分类的名称, 右面显示对应分类下面的商品 #### 2.当填写了一级分类id ![](https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png) ![](https://img.kancloud.cn/99/12/9912c20c3dfe2ed38b0bc3ee08b70d3f_97x432.png) 这里显示填写的一级分类下面的二级分类名称 右面显示对应的二级分类商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png) ![](https://img.kancloud.cn/99/12/9912c20c3dfe2ed38b0bc3ee08b70d3f_97x432.png) 这里显示对应的二级分类下面的三级分类的名称; 右面显示对应的三级分类的商品; #### 4.当填写三级分类id 之间显示对应三级分类的商品; # 二级分类样式四种: ## 1.二级分类中的小图标样式(不显示商品): ![](https://img.kancloud.cn/1d/b5/1db5778a6cf036cd620c4d5f0c2d6546_343x578.png) #### 1.当不填写分类id: 左边显示一级分类的名称 右边显示对应的二级分类的小图标; #### 2.当填写一级分类id 左边显示对应的一级分类下面的二级分类名称 右边显示二级分类下面的三级分类的小图标 #### 3.当填写二级分类id 左边显示二级分类下面的三级分类名称 右边为空 #### 4.不支持填写三级分类id ## 2.二级分类中的大图标样式(不显示商品): ![](https://img.kancloud.cn/b6/a0/b6a0ee048cc7bb0eacbeccfcd8d613d1_344x563.png) #### 1.当不填写分类id: 左边显示一级分类的名称 右边显示对应的二级分类的大图标; #### 2.当填写一级分类id 左边显示对应的一级分类下面的二级分类名称 右边显示二级分类下面的三级分类的大图标 #### 3.当填写二级分类id 左边显示二级分类下面的三级分类名称 右边为空 #### 4.不支持填写三级分类id ## 3..二级分类中的商品列表样式(顶栏&显示商品) ![](https://img.kancloud.cn/88/fa/88fa557d1192fed218010e3fab37f10e_355x587.png) #### 1.当不填写分类id: ![](https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png) 第一层显示一级分类名称 ![](https://img.kancloud.cn/1f/47/1f47c4527d12495ea43dba9a9117bb55_297x73.png) 第二层显示二级分类名称 下面显示二级分类对应的商品 #### 2.当填写一级分类id ![](https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png) 第一层显示该一级分类下面的二级分类的名称 ![](https://img.kancloud.cn/1f/47/1f47c4527d12495ea43dba9a9117bb55_297x73.png) 第二层显示三级分类名称 下面显示三级分类对应的商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png) 第一层显示该一级分类下面的三级分类的名称 没有第二层 下面显示三级分类的商品 #### 4.当填写三级分类id 直接显示三级分类商品 ## 4..二级分类中的商品列表样式(侧栏&显示商品) ![](https://img.kancloud.cn/13/51/13510747bf395bb45319135e9203e9e6_347x567.png) #### 1.当不填写分类id: ![](https://img.kancloud.cn/ea/d4/ead43eb85386a20f3d3239b48146834d_89x408.png) 第一层显示一级分类名称 ![](https://img.kancloud.cn/1f/47/1f47c4527d12495ea43dba9a9117bb55_297x73.png) 第二层显示二级分类名称 下面显示二级分类对应的商品 #### 2.当填写一级分类id ![](https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png) 左侧显示该一级分类下面的二级分类的名称 ![](https://img.kancloud.cn/d7/37/d7374cebe5ddf0fb0ace345e1e97971d_237x62.png) 这里显示三级分类名称 右下显示三级分类对应的商品 #### 3.当填写二级分类id ![](https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png) 左侧显示该一级分类下面的三级分类的名称 右下显示三级分类的商品 #### 4.当填写三级分类id 直接显示三级分类商品 # 三级分类样式三种: 填不填分类id都是直接显示所有三级分类。固定样式不变 ![](https://img.kancloud.cn/84/1d/841dbd8a7e0abe097fcddf40fd771eaf_1081x581.png)