随着技术的不断发展，传统的开发方式使得系统的复杂度越来越高。在传统开发过程中，一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改，造成牵一发而动全身的情况。为了解决这个问题，我们采用了组件化的开发模式。通过组件化开发，可以有效地实现单独开发，单独维护，而且它们之间可以随意的进行组合。大大提升了开发的效率，降低了维护的成本。

本文将介绍一款组件：自定义精美商品分类组件category 可用于电商应用分类页面，并附带源码下载地址：https://ext.dcloud.net.cn/plugin?id=13837

效果图如下：

cc-beautyCate 自定义精美分类组件 可用于电商商品分类页面

使用方法

<!-- category-list：分类列表  @itemClick：条目点击 --><cc-beautyCate :category-list="categoryList" @itemClick="toCategory"></cc-beautyCate>

HTML代码实现部分

<template><view><!-- category-list：分类列表  @itemClick：条目点击 --><cc-beautyCate :category-list="categoryList" @itemClick="toCategory"></cc-beautyCate></view></template><script>//高德SDKexport default {data() {return {categoryList: [{cid: 1,main_name: '女装',data: [{next_name: '裙装',info: [{son_name: '连衣裙',imgurl: 'http://img.haodanku.com/89937f347f81f5c5539f9da9b35b7a62-600'},{son_name: '雪纺裙',imgurl: 'http://img.haodanku.com/3deb054da8cb2f4b1b5a07ab530e7e41-600'},{son_name: '半身裙',imgurl: 'http://img.haodanku.com/b68bc66ab1a81db336110b7c1196b5a9-600'},{son_name: '印花裙',imgurl: 'http://img.haodanku.com/3ce7249ba847286308c82bed97f7817d-600'},{son_name: '吊带裙',imgurl: 'http://img.haodanku.com/0716abc13652355b130dc3c83d39a7dc-600'},{son_name: '纯色裙',imgurl: 'http://img.haodanku.com/de464503dab5d20a5d6505573f1624bd-600'}]},{next_name: '套装',info: [{son_name: '两件套',imgurl: 'http://img.haodanku.com/dcabee1a81b9c631bbc903597fad52a2-600'},{son_name: '夏季套装',imgurl: 'http://img.haodanku.com/fcf45b47afad11fe7ac05c179de174c1-600'},{son_name: '大码女装',imgurl: 'http://img.haodanku.com/005f603379aa285718b3f7c99c1ca88a-600'},{son_name: '妈妈装',imgurl: 'http://img.haodanku.com/cf445d5d9ddad49a38c0e542be22b565-600'},{son_name: '婚纱',imgurl: 'http://img.haodanku.com/d40c79df78c0a0cfbbb05605891950db-600'},{son_name: '小香风',imgurl: 'http://img.haodanku.com/2907a1a4faf78674c4ff422ce9ca16eb-600'},{son_name: '运动套装',imgurl: 'http://img.haodanku.com/97340565f9420afafc7a37966095da75-600'},{son_name: '雪纺套装',imgurl: 'http://img.haodanku.com/233b900fde6dc193a0c4b8886d121002-600'}]},{next_name: 'T恤',info: [{son_name: 'T恤',imgurl: 'http://img.haodanku.com/397fc31d9f3abdef5177ab1ec82a254c-600'},{son_name: '一字肩',imgurl: 'http://img.haodanku.com/f4ca5e271d74fd5c29d051c7b1106f04-600'},{son_name: '印花雪纺',imgurl: 'http://img.haodanku.com/60e743e4a53b475f2b01a606b61ab217-600'},{son_name: '吊带T恤',imgurl: 'http://img.haodanku.com/7aad5119d9e8d49c74ab97e31944ba63-600'},{son_name: '娃娃衫',imgurl: 'http://img.haodanku.com/9a596fb1d0c7008cdfad30e5562b3b3f-600'},{son_name: '情侣T恤',imgurl: 'http://img.haodanku.com/9880baf8c939776a65a64c6ec6b37621-600'},{son_name: '白衬衣',imgurl: 'http://img.haodanku.com/1c60edccb596c5f3496d883be75869c5-600'},{son_name: '短袖T恤',imgurl: 'http://img.haodanku.com/81ee9efd599bcfb76668e0ab3d08df6d-600'},{son_name: '纯色T恤',imgurl: 'http://img.haodanku.com/44d365c3c459a4a04185f1fa947e7353-600'},{son_name: '蕾丝拼接',imgurl: 'http://img.haodanku.com/f77f58f4f0f67b4c3cd830954354462a-600'},{son_name: '蕾丝衫',imgurl: 'http://img.haodanku.com/fe7c5357cb05b2128bf95c014c402092-600'},{son_name: '防晒衫',imgurl: 'http://img.haodanku.com/99d63b5ef04f0599ef94a71b1a247fef-600'},{son_name: '露肩上衣',imgurl: 'http://img.haodanku.com/a39d41be029747367e3889ea195043b1-600'},{son_name: '长袖T恤',imgurl: 'http://img.haodanku.com/d0ae23ec9b6d46e16bd2e0e924b2bd83-600'}]},{next_name: '内搭',info: [{son_name: '喇叭袖',imgurl: 'http://img.haodanku.com/6d8739d3e2aba86cfe98c3d8c631cb18-600'},{son_name: '开衫',imgurl: 'http://img.haodanku.com/051f12a2106ca222a4a651ef556419b2-600'},{son_name: '打底毛衣',imgurl: 'http://img.haodanku.com/d93f276b06e1aa4d9f5a7c4718ca675d-600'},{son_name: '毛衣',imgurl: 'http://img.haodanku.com/5ae75e2e972aec9126ac7ef6e44bd279-600'},{son_name: '针织衫',imgurl: 'http://img.haodanku.com/d989f5485e411a23b53d903787e9e8ae-600'},{son_name: '高领',imgurl: 'http://img.haodanku.com/226f1370ec92bd4804621851e4a45cd4-600'}]},{next_name: '外套',info: [{son_name: '卫衣',imgurl: 'http://img.haodanku.com/2329f94b4030aa27e819e159d64969c4-600'},{son_name: '夹克',imgurl: 'http://img.haodanku.com/ab499244178c525025d8a3e1ff4ed36e-600'},{son_name: '棉服',imgurl: 'http://img.haodanku.com/6d3898d409060a49ebc6a80c150d15b2-600'},{son_name: '毛呢',imgurl: 'http://img.haodanku.com/5b397df30169b79af64c569606b7e0af-600'},{son_name: '牛仔',imgurl: 'http://img.haodanku.com/38a001153e2f30933f3cae16f2b2a171-600'},{son_name: '皮衣',imgurl: 'http://img.haodanku.com/78c7fcecea8eaf4b329002b3308b3545-600'},{son_name: '短外套',imgurl: 'http://img.haodanku.com/26a08a44cce036a5cf49a3322e4cbf37-600'},{son_name: '羽绒',imgurl: 'http://img.haodanku.com/8b319845442d1ca43866388b3cdc9008-600'},{son_name: '西装',imgurl: 'http://img.haodanku.com/8760d56b968fff5f4542cba45398f911-600'},{son_name: '风衣',imgurl: 'http://img.haodanku.com/fce2eacae26fdd2be1e56319570db29e-600'},{son_name: '马甲',imgurl: 'http://img.haodanku.com/72c6ef4b40de18dddb9ae5dd38a9a051-600'}]},{next_name: '裤子',info: [{son_name: '休闲裤',imgurl: 'http://img.haodanku.com/047d30183d119f6805767a2649e05047-600'},{son_name: '哈伦裤',imgurl: 'http://img.haodanku.com/a1711789779fbd5c921fe1672619879f-600'},{son_name: '棉麻裤',imgurl: 'http://img.haodanku.com/a3e99f528f0cf163b96b0f6090226364-600'},{son_name: '牛仔裤',imgurl: 'http://img.haodanku.com/d1c7bf2b3a3d52047bf2bba87527ce2c-600'},{son_name: '短裤',imgurl: 'http://img.haodanku.com/d370086ea3d2a9c4ba569cfb8daf0d8e-600'},{son_name: '破洞牛仔裤',imgurl: 'http://img.haodanku.com/82462d589beb34111e9fccf66c170c7d-600'},{son_name: '裤子',imgurl: 'http://img.haodanku.com/049ea9c85a7b917eb9f0844df3910d4b-600'},{son_name: '阔腿裤',imgurl: 'http://img.haodanku.com/d59ec97908e5f2a3af232cbb23c54f31-600'}]}]},{cid: 2,main_name: '男装',data: [{next_name: '内搭',info: [{son_name: '长袖T恤',imgurl: 'http://img.haodanku.com/0cd092e3914e60ed74954bbba638d093-600'},{son_name: 'polo衫',imgurl: 'http://img.haodanku.com/0503477c4c5d9618b5be5dc3f7712dcf-600'},{son_name: 'T恤',imgurl: 'http://img.haodanku.com/439ba8ee07892f939714783e5f5fa49d-600'},{son_name: '卫衣',imgurl: 'http://img.haodanku.com/fa31cffcb202ac6523853af99810afb9-600'},{son_name: '短袖T恤',imgurl: 'http://img.haodanku.com/c12f373877a7a4b9e4856d552c91e3b3-600'},{son_name: '衬衣',imgurl: 'http://img.haodanku.com/9d792370897c7f393059514b17a0cb14-600'}]},{next_name: '外套',info: [{son_name: '马甲',imgurl: 'http://img.haodanku.com/325254ca7f6e1f03c438d818cb4c67cb-600'},{son_name: '呢大衣',imgurl: 'http://img.haodanku.com/f3c0fd52abf5945b5d253a64f8fce62d-600'},{son_name: '夹克',imgurl: 'http://img.haodanku.com/250eefdd7acef0934e9f0fafffa75c88-600'},{son_name: '棉衣',imgurl: 'http://img.haodanku.com/6b5cd4e0f1c6f346b552651209cf78a3-600'},{son_name: '棒球服',imgurl: 'http://img.haodanku.com/2c296a0d7e6600da4b5f572c1c1878e4-600'},{son_name: '牛仔外套',imgurl: 'http://img.haodanku.com/d55f8511d3916346c8a808dbe5b0868a-600'},{son_name: '皮衣',imgurl: 'http://img.haodanku.com/14f79fee301aa6bb5a69318d9d95a2ef-600'},{son_name: '羽绒服',imgurl: 'http://img.haodanku.com/51ee457f0c7b8c2ddb6f4e5e9dd9818e-600'},{son_name: '西装',imgurl: 'http://img.haodanku.com/09290b9079002c5d957b245bf8d5dc22-600'},{son_name: '风衣',imgurl: 'http://img.haodanku.com/16a6f06b799c96f30289e124ee084f9a-600'}]},{next_name: '下装',info: [{son_name: '七分裤',imgurl: 'http://img.haodanku.com/cc410e901bbb46c0ccb39de7d834186d-600'},{son_name: '九分裤',imgurl: 'http://img.haodanku.com/fae33cdacda6852a7628c206f9cc3691-600'},{son_name: '休闲裤',imgurl: 'http://img.haodanku.com/28261afc8638e81810396e804be7bb4e-600'},{son_name: '哈伦裤',imgurl: 'http://img.haodanku.com/87ee360c875520d8df6d1fc326fceebf-600'},{son_name: '工装裤',imgurl: 'http://img.haodanku.com/de243065fe1031a3b673911ca3f5d554-600'},{son_name: '沙滩裤',imgurl: 'http://img.haodanku.com/890d879df68a83fc884af2ac40590f9f-600'},{son_name: '牛仔裤',imgurl: 'http://img.haodanku.com/f7aed5f42224b34532e92e57d667fb35-600'},{son_name: '短裤',imgurl: 'http://img.haodanku.com/957ec585e9c7af6b740b28e03e94484d-600'},{son_name: '西裤',imgurl: 'http://img.haodanku.com/883c7c0972e09d96ee7ba2df0990de48-600'},{son_name: '运动裤',imgurl: 'http://img.haodanku.com/11f8a9fe9f1c81a720870c65c3d95347-600'}]},{next_name: '针织衫',info: [{son_name: '套头',imgurl: 'http://img.haodanku.com/fad26efeddcbb8b28b31365f0e3ebdcf-600'},{son_name: '开衫',imgurl: 'http://img.haodanku.com/9a1297fddeb4ec33d63e1a353975fef9-600'},{son_name: '毛衣',imgurl: 'http://img.haodanku.com/4f488cd57da11a19dc5dc0f6a1d48eff-600'},{son_name: '羊毛衫',imgurl: 'http://img.haodanku.com/469ad3c34a07e7296bd52a6e49e3e7cc-600'},{son_name: '针织衫',imgurl: 'http://img.haodanku.com/79967f9058dd6b94dbc43714b652b090-600'},{son_name: '高领',imgurl: 'http://img.haodanku.com/0edca60c499cd86fe5d9ad2afb85e9c7-600'}]}]},{cid: 3,main_name: '内衣',data: [{next_name: '内衣',info: [{son_name: '保暖背心',imgurl: 'http://img.haodanku.com/e093297d8e26e30a3d5aac4a613ec4f3-600'},{son_name: '内衣套装',imgurl: 'http://img.haodanku.com/8f0f258453126d0eba37806e99d61f3c-600'},{son_name: '内裤女',imgurl: 'http://img.haodanku.com/8fb1969ae13d3854a019176068cb19fd-600'},{son_name: '内裤男',imgurl: 'http://img.haodanku.com/bd263e2ae6f0b6d55f58aa45e98f8d5a-600'},{son_name: '打底裤',imgurl: 'http://img.haodanku.com/48ecf13aa01d4df986d08f807f5bde8a-600'},{son_name: '文胸',imgurl: 'http://img.haodanku.com/5515534e4b57c437ff99823194af9efa-600'},{son_name: '塑身衣',imgurl: 'http://img.haodanku.com/d4e8eb149c618aa91d74e2ea98c54bab-600'},{son_name: '秋裤',imgurl: 'http://img.haodanku.com/df2ce30731a1f5328163f02315cbcdf6-600'}]},{next_name: '睡衣',info: [{son_name: '保暖睡衣',imgurl: 'http://img.haodanku.com/4d20bb96196142cd1789ffb9608e0e6c-600'},{son_name: '卡通睡衣',imgurl: 'http://img.haodanku.com/8972e51a91b6564fdad5efd05dac9f8a-600'},{son_name: '夹棉睡衣',imgurl: 'http://img.haodanku.com/b2c95bf4420cd9ae947a715da3713625-600'},{son_name: '女士睡衣',imgurl: 'http://img.haodanku.com/9e1cbba89c247ed6df0a0db7267bf964-600'},{son_name: '情侣睡衣',imgurl: 'http://img.haodanku.com/8b005a55b45644839498aa75f4ee3e56-600'},{son_name: '珊瑚绒',imgurl: 'http://img.haodanku.com/079c725c7efe42cd8a005ea47542d939-600'},{son_name: '男士睡衣',imgurl: 'http://img.haodanku.com/c34cc2e6422f7493edac577c4b403146-600'},{son_name: '睡袍',imgurl: 'http://img.haodanku.com/7e5f5f97ab66f4d6c7b9fcf972e30e55-600'},{son_name: '睡裙',imgurl: 'http://img.haodanku.com/9348b8b75ef49b82e6cca3ef9d05bcf8-600'},{son_name: '短袖睡衣',imgurl: 'http://img.haodanku.com/360d6c896363e0158be255278923a900-600'},{son_name: '长袖睡衣',imgurl: 'http://img.haodanku.com/3c2a90a42396671688c5aaed75ee2b2a-600'}]},{next_name: '袜子',info: [{son_name: '女袜',imgurl: 'http://img.haodanku.com/5721a24e445fcd88ae8afa4b31432a0f-600'},{son_name: '棉袜',imgurl: 'http://img.haodanku.com/b08b0ad37e100ddef347205270bbc260-600'},{son_name: '男袜',imgurl: 'http://img.haodanku.com/1866e702f375974facb979e2a87e95df-600'},{son_name: '裤袜',imgurl: 'http://img.haodanku.com/95a4cd9d01b7ca5c544afeb5a35969f9-600'},{son_name: '长筒袜',imgurl: 'http://img.haodanku.com/edf2befbb6c1abd0fa67fbee47cb0ae9-600'}]}]},{cid: 4,main_name: '美妆',data: [{next_name: '个人护理',info: [{son_name: '头发造型',imgurl: 'http://img.haodanku.com/d07c4bf91101a3b6a0a8a340bf068ac4-600'},{son_name: '护发素',imgurl: 'http://img.haodanku.com/a9e63479e7edc40aedde33cca15f03f7-600'},{son_name: '染发膏',imgurl: 'http://img.haodanku.com/1b8e6a4cd2961a1d468557b4d766eca6-600'},{son_name: '沐浴露',imgurl: 'http://img.haodanku.com/14bfdb8fc38493aa985d310d390aad19-600'},{son_name: '洗发水',imgurl: 'http://img.haodanku.com/162652a65fc931cf7aba34436a5882cd-600'},{son_name: '清洁剂',imgurl: 'http://img.haodanku.com/cc34507e016b01cc6005d028b55aa1cc-600'},{son_name: '刷子',imgurl: 'http://img.haodanku.com/529884a59eb3a2ed7cad27cc215f042c-600'},{son_name: '私处护理',imgurl: 'http://img.haodanku.com/28ca7a798ebef550b71616c0158f5a3f-600'},{son_name: '足浴',imgurl: 'http://img.haodanku.com/14291c443185a267818e2d434d8a3342-600'},{son_name: '足贴',imgurl: 'http://img.haodanku.com/cb2b79782adeff70c42b6a77d9ee7fbc-600'},{son_name: '香薰',imgurl: 'http://img.haodanku.com/d4e749698878f0318254e2844a2ab4b1-600'}]},{next_name: '美妆',info: [{son_name: 'BB霜',imgurl: 'http://img.haodanku.com/489dc81a627234b735e508ea3c5a30d6-600'},{son_name: '乳液',imgurl: 'http://img.haodanku.com/2da72ef1545f4e6e729daca73469daa7-600'},{son_name: '卸妆',imgurl: 'http://img.haodanku.com/11f4c31e57040ca6578e395764685f9d-600'},{son_name: '唇膏',imgurl: 'http://img.haodanku.com/73dce1ba7e1e6c2f087a82e6e2daaf0f-600'},{son_name: '彩妆品盘',imgurl: 'http://img.haodanku.com/885defc8e1c9263ff87a2bc661118c63-600'},{son_name: '洁面仪',imgurl: 'http://img.haodanku.com/e7a50ccfa072697de187a8257a63938e-600'},{son_name: '洗面奶',imgurl: 'http://img.haodanku.com/0390ae3565930d395244524603d38605-600'},{son_name: '爽肤水',imgurl: 'http://img.haodanku.com/5dc1013d4ed73422d9963e03d24ca8f2-600'},{son_name: '男士护理',imgurl: 'http://img.haodanku.com/0821d27e39fffa2bc6cb2372800d33b3-600'},{son_name: '眼线',imgurl: 'http://img.haodanku.com/4216c4cdc29f8e9bce9722bf2329f4d4-600'},{son_name: '眼霜',imgurl: 'http://img.haodanku.com/9bcc8b7e61d0958a4cf24efa92d8d7d9-600'},{son_name: '睫毛膏',imgurl: 'http://img.haodanku.com/917ca505a2916d4308258c1df00aa6bc-600'},{son_name: '粉底液',imgurl: 'http://img.haodanku.com/b8c50f1f046846de3a22b68b681799d0-600'},{son_name: '精华',imgurl: 'http://img.haodanku.com/c236b1acfcf8aeaffef5b01ab73e5608-600'},{son_name: '精油',imgurl: 'http://img.haodanku.com/c57b417129f661124f5b7f863fc2a5ed-600'},{son_name: '纤体',imgurl: 'http://img.haodanku.com/900cbfe080fcea90a276c9b0367252ef-600'},{son_name: '脱毛',imgurl: 'http://img.haodanku.com/bd495c3062c688f6c1a00a6f02a57655-600'},{son_name: '腮红',imgurl: 'http://img.haodanku.com/1305d219f6095577b2d4930531a1b3ee-600'},{son_name: '身体护理',imgurl: 'http://img.haodanku.com/31610649476cc77a474959eb39f1b929-600'},{son_name: '防晒',imgurl: 'http://img.haodanku.com/1d23fffba3e6ed348369ecf8fdab6659-600'},{son_name: '隔离霜',imgurl: 'http://img.haodanku.com/76c233634b9d2eb0ba2353d1c834a070-600'},{son_name: '面膜',imgurl: 'http://img.haodanku.com/f9ddb9d89e9bfd8312056b02c4081bcd-600'},{son_name: '面霜',imgurl: 'http://img.haodanku.com/e57cb97f45eacb673b10d4179ce54079-600'},{son_name: '香水',imgurl: 'http://img.haodanku.com/04e330d7bfe0dca66883d8a52286552c-600'}]},{next_name: '营养保健',info: [{son_name: 'B族维生素',imgurl: 'http://img.haodanku.com/1f59496fee3c1610426c711c3d1d4ec4-600'},{son_name: '大豆异黄酮',imgurl: 'http://img.haodanku.com/12c9c22137b4bcba282fd3df6f0fa01e-600'},{son_name: '左旋',imgurl: 'http://img.haodanku.com/dd4e18688356aa319c81ea718f50a447-600'},{son_name: '氨基葡萄糖',imgurl: 'http://img.haodanku.com/81b23d4f172a49b845757548992c9c86-600'},{son_name: '维生素',imgurl: 'http://img.haodanku.com/affa0845d378957e98cc2362b2c8fe78-600'},{son_name: '维生素C',imgurl: 'http://img.haodanku.com/815ca9b2b1af15cefe5254c15656a8ab-600'},{son_name: '胶原蛋白',imgurl: 'http://img.haodanku.com/1e22d5f3d6e3066d103cbb81d56aa413-600'},{son_name: '葡萄籽',imgurl: 'http://img.haodanku.com/d2d1641b79898540be56943a26e9fbf1-600'},{son_name: '螺旋藻',imgurl: 'http://img.haodanku.com/5e0f7000c10daed73047db311e9140bf-600'},{son_name: '褪黑素',imgurl: 'http://img.haodanku.com/69210ef9179d6f60456d8c35d953ef83-600'},{son_name: '软骨素',imgurl: 'http://img.haodanku.com/8598d5b6d46da97fc2e2bacc0ab6701a-600'},{son_name: '辅酶Q10',imgurl: 'http://img.haodanku.com/6d3244a7bc47008fec9c5776db5a4431-600'},{son_name: '酵素',imgurl: 'http://img.haodanku.com/6607fec9d51f603dd680aa56c8d367b7-600'},{son_name: 'B族维生素',imgurl: 'http://img.haodanku.com/1f59496fee3c1610426c711c3d1d4ec4-600'},{son_name: 'DHA',imgurl: 'http://img.haodanku.com/a9146cfb07408e86776b0f8e720302c8-600'},{son_name: '大豆异黄酮',imgurl: 'http://img.haodanku.com/12c9c22137b4bcba282fd3df6f0fa01e-600'},{son_name: '左旋',imgurl: 'http://img.haodanku.com/dd4e18688356aa319c81ea718f50a447-600'},{son_name: '月见草油',imgurl: 'http://img.haodanku.com/b7b3febf2ac9a51fc9ae956da2fa3de6-600'},{son_name: '氨基葡萄糖',imgurl: 'http://img.haodanku.com/81b23d4f172a49b845757548992c9c86-600'},{son_name: '玛咖',imgurl: 'http://img.haodanku.com/6eed576e355b970a83afafaa7e18ab1d-600'},{son_name: '益生菌',imgurl: 'http://img.haodanku.com/b12d21f28f7ec2bd4fd91bebe5ca9e63-600'},{son_name: '维生素',imgurl: 'http://img.haodanku.com/affa0845d378957e98cc2362b2c8fe78-600'},{son_name: '维生素C',imgurl: 'http://img.haodanku.com/815ca9b2b1af15cefe5254c15656a8ab-600'},{son_name: '胶原蛋白',imgurl: 'http://img.haodanku.com/1e22d5f3d6e3066d103cbb81d56aa413-600'},{son_name: '葡萄籽',imgurl: 'http://img.haodanku.com/d2d1641b79898540be56943a26e9fbf1-600'},{son_name: '螺旋藻',imgurl: 'http://img.haodanku.com/5e0f7000c10daed73047db311e9140bf-600'},{son_name: '褪黑素',imgurl: 'http://img.haodanku.com/69210ef9179d6f60456d8c35d953ef83-600'},{son_name: '软骨素',imgurl: 'http://img.haodanku.com/8598d5b6d46da97fc2e2bacc0ab6701a-600'},{son_name: '辅酶Q10',imgurl: 'http://img.haodanku.com/6d3244a7bc47008fec9c5776db5a4431-600'},{son_name: '酵素',imgurl: 'http://img.haodanku.com/6607fec9d51f603dd680aa56c8d367b7-600'},{son_name: '钙',imgurl: 'http://img.haodanku.com/98d655571845e533cbcbab620db00f6b-600'},{son_name: '鱼油',imgurl: 'http://img.haodanku.com/5b041d1a105e86d3c5c7f2e3c4ad713f-600'}]}]},{cid: 5,main_name: '配饰',data: [{next_name: '帽子',info: [{son_name: '套头帽',imgurl: 'http://img.haodanku.com/125f6e478053e17b2c0ba682bd0a5a39-600'},{son_name: '毛线帽',imgurl: 'http://img.haodanku.com/e1187ddf4721580e67efb50dac464dab-600'},{son_name: '渔夫帽',imgurl: 'http://img.haodanku.com/b3828f4435ede4fa3463e55dde914b40-600'},{son_name: '爵士帽',imgurl: 'http://img.haodanku.com/980c97dd05f40ed47ac16a79612dd167-600'},{son_name: '盆帽',imgurl: 'http://img.haodanku.com/676817946cacdbe83c377d9cc9860aa9-600'},{son_name: '礼帽',imgurl: 'http://img.haodanku.com/cc142d12454557ef22b4ceb3ce4fe6ec-600'},{son_name: '贝雷帽',imgurl: 'http://img.haodanku.com/6d5eebc640a964a4b55fb03046a2f8fb-600'},{son_name: '针织帽',imgurl: 'http://img.haodanku.com/0b376d73ab661bbab0c83d8aefc50aca-600'},{son_name: '鸭舌帽',imgurl: 'http://img.haodanku.com/1de98e064ef1e8dd92d4e95eda311105-600'}]},{next_name: '配饰',info: [{son_name: '半指手套',imgurl: 'http://img.haodanku.com/2439ed86402cb2d8eff39995ef1fc4e4-600'},{son_name: '手套',imgurl: 'http://img.haodanku.com/e5183b8d3236027d4c0cd2fe923f7d34-600'},{son_name: '真皮腰带',imgurl: 'http://img.haodanku.com/cd8ad3794ee3fbb1a8c8bce8f88f7ef1-600'},{son_name: '腰带',imgurl: 'http://img.haodanku.com/7586c7f14be6334d52ea6f862048ce3a-600'},{son_name: '触屏手套',imgurl: 'http://img.haodanku.com/a69d879b523d78d0203fe4879109486f-600'},{son_name: '雨伞',imgurl: 'http://img.haodanku.com/eb9cb749ec8237a84227614d356bfd0f-600'}]},{next_name: '围巾',info: [{son_name: '披肩围巾',imgurl: 'http://img.haodanku.com/e7a8efb7077e6e0e71f038582f7a6ba8-600'},{son_name: '棉麻围巾',imgurl: 'http://img.haodanku.com/ac5962ed20036929d9d533e467a85fd0-600'},{son_name: '真丝围巾',imgurl: 'http://img.haodanku.com/c371383e6e2f9b234f30d32c0a1295ef-600'},{son_name: '羊毛围巾',imgurl: 'http://img.haodanku.com/2959aea355069c58f07a5bd4312c0750-600'},{son_name: '羊绒围巾',imgurl: 'http://img.haodanku.com/9870a6e83a4e97ce9f8b8d2bf2fe057e-600'}]}]},{cid: 6,main_name: '鞋品',data: [{next_name: '男鞋',info: [{son_name: '乐福鞋',imgurl: 'http://img.haodanku.com/9843bf86c735fca4495b93cbb9371b56-600'},{son_name: '休闲鞋',imgurl: 'http://img.haodanku.com/52ac4c99b933215aa4767dfbcf1ee459-600'},{son_name: '凉鞋',imgurl: 'http://img.haodanku.com/6f80f7d856fef73155d88ac0ec633d93-600'},{son_name: '增高鞋',imgurl: 'http://img.haodanku.com/5dfbd1e8047e1fa4bc9424fc44a81037-600'},{son_name: '帆布鞋',imgurl: 'http://img.haodanku.com/b1ec5218812aac9249071123cc9ff37d-600'},{son_name: '板鞋',imgurl: 'http://img.haodanku.com/c0ea8e1a9a0e9c486c2f3b571b495395-600'},{son_name: '网布鞋',imgurl: 'http://img.haodanku.com/acaf3517b2b374e568e512ea2c1c0334-600'},{son_name: '豆豆鞋',imgurl: 'http://img.haodanku.com/6f74d2cd0dc9de9ea1b746ab78ba6b66-600'},{son_name: '运动鞋',imgurl: 'http://img.haodanku.com/7b3bc2187dfeaf64dbb61ad6d3eb358f-600'}]},{next_name: '女鞋',info: [{son_name: '中跟鞋',imgurl: 'http://img.haodanku.com/5a52d7f0375aadd03558aab5a2489a81-600'},{son_name: '乐福鞋',imgurl: 'http://img.haodanku.com/8ebb992fc125df908039e1468b634c1f-600'},{son_name: '低跟鞋',imgurl: 'http://img.haodanku.com/19c7f3e00da194115690d71b5b0f6691-600'},{son_name: '妈妈鞋',imgurl: 'http://img.haodanku.com/6056eae45f0a96110f028f5f145a7c57-600'},{son_name: '小白鞋',imgurl: 'http://img.haodanku.com/c8bdc977c2f8b484f7066e82f9019417-600'},{son_name: '帆布鞋',imgurl: 'http://img.haodanku.com/70841a66d31d46050b053a7a559aad5c-600'},{son_name: '平底凉鞋',imgurl: 'http://img.haodanku.com/5c245c0d40166fad781505b47e952b81-600'},{son_name: '平底鞋',imgurl: 'http://img.haodanku.com/8773b3b2620fbbc9d33cee40cbeff145-600'},{son_name: '松糕厚底',imgurl: 'http://img.haodanku.com/f8eee922c6d05a17e9bee9dcda4811ac-600'},{son_name: '猫跟鞋',imgurl: 'http://img.haodanku.com/aac30a76edc144585e38c0a5a3560bcc-600'},{son_name: '玛丽珍鞋',imgurl: 'http://img.haodanku.com/b010a4fdd9bb85af6ca67c916c317929-600'},{son_name: '豆豆鞋',imgurl: 'http://img.haodanku.com/32f1673e6784389d2c9aa793c7b2abbe-600'},{son_name: '运动鞋',imgurl: 'http://img.haodanku.com/9449c2e63a06f058a48f788c82591d00-600'},{son_name: '高跟鞋',imgurl: 'http://img.haodanku.com/0ee8f1f3483c3faa69f5ef1f129cfac5-600'}]}]},]};},onLoad() {},methods: {// 分类条目点击toCategory(item) {uni.showModal({title: '温馨提示',content: '点击条目数据 = ' + JSON.stringify(item)})}}};</script><style lang="scss"></style>