分类页面样式 · 小程序商城系统操作手册

<div class="article-body kancloud-markdown-body"><p>注意：分类样式是在4.2.30版本更改，需要前端也是该版本之后重新上传<br> 查看设置位置：<img src="https://img.kancloud.cn/2b/32/2b32512c085db98edf534cf2e1f6f382_1662x864.png" alt=""></p> <h1><a id="4_3"></a>一级分类样式4种：</h1> <h2><a id="1_5"></a>1.一级分类样式-小图标样式（不显示商品）</h2> <p><img src="https://img.kancloud.cn/f3/2f/f32fa5045139439ffaa7f051c16b64a8_378x608.png" alt=""><br><img src="https://img.kancloud.cn/58/f7/58f776447f750fe3aac4ebd0593a6fe2_684x798.png" alt=""><br> 选中该样式，可以选择填写分类id，会出现不同的效果</p> <h4><a id="1id_9"></a>1.当没有填写分类id，则显示所有一级分类的小图标；</h4> <h4><a id="2id_10"></a>2.当填写了一级分类id</h4> <p><img src="https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png" alt=""><br> 则显示该一级分类下面的二级分类的小图标</p> <h4><a id="3id_13"></a>3.当填写二级分类id</h4> <p><img src="https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png" alt=""><br> 则显示该二级分类下面的三级分类的小图标</p> <h4><a id="4id_16"></a>4.不支持填写三级分类id</h4> <h2><a id="2_18"></a>2.一级分类样式-大图标样式（不显示商品）</h2> <p><img src="https://img.kancloud.cn/a7/3f/a73f62cf81d6ec2dd015f3cb8775fccc_377x603.png" alt=""><br><img src="https://img.kancloud.cn/d5/11/d5110893298eefa215257f2c9b84b3a3_946x817.png" alt=""><br> 选中该样式，可以选择填写分类id，会出现不同的效果</p> <h4><a id="1id_22"></a>1.当没有填写分类id，则显示所有一级分类的大图标；</h4> <h4><a id="2id_23"></a>2.当填写了一级分类id</h4> <p><img src="https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png" alt=""><br> 则显示该一级分类下面的二级分类的大图标</p> <h4><a id="3id_26"></a>3.当填写二级分类id</h4> <p><img src="https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png" alt=""><br> 则显示该二级分类下面的三级分类的大图标</p> <h4><a id="4id_29"></a>4.不支持填写三级分类id</h4> <h2><a id="3_31"></a>3.一级分类中的商品列表样式（顶栏&显示商品）</h2> <p><img src="https://img.kancloud.cn/8b/11/8b117bc60fa5935a9b1765d292885a86_395x643.png" alt=""><br> 选中该样式，可以选择填写分类id，会出现不同的效果</p> <h4><a id="1id_34"></a>1.当没有填写分类id，</h4> <p><img src="https://img.kancloud.cn/28/51/28514ffa149fe1001163685f72d59b27_404x74.png" alt=""><br> 这里显示所有一级分类的名称，<br> 下面显示对应分类下面的商品</p> <h4><a id="2id_38"></a>2.当填写了一级分类id</h4> <p><img src="https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png" alt=""><br><img src="https://img.kancloud.cn/28/51/28514ffa149fe1001163685f72d59b27_404x74.png" alt=""><br> 这里显示填写的一级分类下面的二级分类名称<br> 下面显示对应的二级分类商品</p> <h4><a id="3id_43"></a>3.当填写二级分类id</h4> <p><img src="https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png" alt=""><br><img src="https://img.kancloud.cn/28/51/28514ffa149fe1001163685f72d59b27_404x74.png" alt=""><br> 这里显示对应的二级分类下面的三级分类的名称；<br> 下面显示对应的三级分类的商品；</p> <h4><a id="4id_48"></a>4.当填写三级分类id</h4> <p>之间显示对应三级分类的商品；</p> <h2><a id="4_51"></a>4.一级分类中的商品列表样式（左侧栏&显示商品）</h2> <p><img src="https://img.kancloud.cn/5d/41/5d41d51371b97d3fcb40b85f376a95fb_360x578.png" alt=""><br> 选中该样式，可以选择填写分类id，会出现不同的效果</p> <h4><a id="1id_54"></a>1.当没有填写分类id，</h4> <p><img src="https://img.kancloud.cn/99/12/9912c20c3dfe2ed38b0bc3ee08b70d3f_97x432.png" alt=""><br> 这里显示所有一级分类的名称，<br> 右面显示对应分类下面的商品</p> <h4><a id="2id_58"></a>2.当填写了一级分类id</h4> <p><img src="https://img.kancloud.cn/97/52/97527ebf1e3c1a6711e29d4aaf37e22e_1671x698.png" alt=""><br><img src="https://img.kancloud.cn/99/12/9912c20c3dfe2ed38b0bc3ee08b70d3f_97x432.png" alt=""><br> 这里显示填写的一级分类下面的二级分类名称<br> 右面显示对应的二级分类商品</p> <h4><a id="3id_63"></a>3.当填写二级分类id</h4> <p><img src="https://img.kancloud.cn/b6/3e/b63ef1a51f950ef5a4bb93aaed3cc14d_1678x783.png" alt=""><br><img src="https://img.kancloud.cn/99/12/9912c20c3dfe2ed38b0bc3ee08b70d3f_97x432.png" alt=""><br> 这里显示对应的二级分类下面的三级分类的名称；<br> 右面显示对应的三级分类的商品；</p> <h4><a id="4id_68"></a>4.当填写三级分类id</h4> <p>之间显示对应三级分类的商品；</p> <h1><a id="_73"></a>二级分类样式四种：</h1> <h2><a id="1_74"></a>1.二级分类中的小图标样式（不显示商品）：</h2> <p><img src="https://img.kancloud.cn/1d/b5/1db5778a6cf036cd620c4d5f0c2d6546_343x578.png" alt=""></p> <h4><a id="1id_76"></a>1.当不填写分类id：</h4> <p>左边显示一级分类的名称<br> 右边显示对应的二级分类的小图标；</p> <h4><a id="2id_79"></a>2.当填写一级分类id</h4> <p>左边显示对应的一级分类下面的二级分类名称<br> 右边显示二级分类下面的三级分类的小图标</p> <h4><a id="3id_82"></a>3.当填写二级分类id</h4> <p>左边显示二级分类下面的三级分类名称<br> 右边为空</p> <h4><a id="4id_85"></a>4.不支持填写三级分类id</h4> <h2><a id="2_87"></a>2.二级分类中的大图标样式（不显示商品）：</h2> <p><img src="https://img.kancloud.cn/b6/a0/b6a0ee048cc7bb0eacbeccfcd8d613d1_344x563.png" alt=""></p> <h4><a id="1id_89"></a>1.当不填写分类id：</h4> <p>左边显示一级分类的名称<br> 右边显示对应的二级分类的大图标；</p> <h4><a id="2id_92"></a>2.当填写一级分类id</h4> <p>左边显示对应的一级分类下面的二级分类名称<br> 右边显示二级分类下面的三级分类的大图标</p> <h4><a id="3id_95"></a>3.当填写二级分类id</h4> <p>左边显示二级分类下面的三级分类名称<br> 右边为空</p> <h4><a id="4id_98"></a>4.不支持填写三级分类id</h4> <h2><a id="3_100"></a>3..二级分类中的商品列表样式（顶栏&显示商品）</h2> <p><img src="https://img.kancloud.cn/88/fa/88fa557d1192fed218010e3fab37f10e_355x587.png" alt=""></p> <h4><a id="1id_102"></a>1.当不填写分类id：</h4> <p><img src="https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png" alt=""><br> 第一层显示一级分类名称<br><img src="https://img.kancloud.cn/1f/47/1f47c4527d12495ea43dba9a9117bb55_297x73.png" alt=""><br> 第二层显示二级分类名称<br> 下面显示二级分类对应的商品</p> <h4><a id="2id_108"></a>2.当填写一级分类id</h4> <p><img src="https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png" alt=""><br> 第一层显示该一级分类下面的二级分类的名称<br><img src="https://img.kancloud.cn/1f/47/1f47c4527d12495ea43dba9a9117bb55_297x73.png" alt=""><br> 第二层显示三级分类名称<br> 下面显示三级分类对应的商品</p> <h4><a id="3id_114"></a>3.当填写二级分类id</h4> <p><img src="https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png" alt=""><br> 第一层显示该一级分类下面的三级分类的名称<br> 没有第二层<br> 下面显示三级分类的商品</p> <h4><a id="4id_119"></a>4.当填写三级分类id</h4> <p>直接显示三级分类商品</p> <h2><a id="4_122"></a>4..二级分类中的商品列表样式（侧栏&显示商品）</h2> <p><img src="https://img.kancloud.cn/13/51/13510747bf395bb45319135e9203e9e6_347x567.png" alt=""></p> <h4><a id="1id_124"></a>1.当不填写分类id：</h4> <p><img src="https://img.kancloud.cn/ea/d4/ead43eb85386a20f3d3239b48146834d_89x408.png" alt=""><br> 第一层显示一级分类名称<br><img src="https://img.kancloud.cn/1f/47/1f47c4527d12495ea43dba9a9117bb55_297x73.png" alt=""><br> 第二层显示二级分类名称<br> 下面显示二级分类对应的商品</p> <h4><a id="2id_130"></a>2.当填写一级分类id</h4> <p><img src="https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png" alt=""><br> 左侧显示该一级分类下面的二级分类的名称<br><img src="https://img.kancloud.cn/d7/37/d7374cebe5ddf0fb0ace345e1e97971d_237x62.png" alt=""><br> 这里显示三级分类名称<br> 右下显示三级分类对应的商品</p> <h4><a id="3id_136"></a>3.当填写二级分类id</h4> <p><img src="https://img.kancloud.cn/c0/3c/c03cf11aa554c0a3c6e81e151c4107a3_306x51.png" alt=""><br> 左侧显示该一级分类下面的三级分类的名称<br> 右下显示三级分类的商品</p> <h4><a id="4id_140"></a>4.当填写三级分类id</h4> <p>直接显示三级分类商品</p> <h1><a id="_143"></a>三级分类样式三种：</h1> <p>填不填分类id都是直接显示所有三级分类。固定样式不变<br><img src="https://img.kancloud.cn/84/1d/841dbd8a7e0abe097fcddf40fd771eaf_1081x581.png" alt=""></p> </div>