最近，群裡面的同學發了這麼一個非常有意思是動畫效果： ![bg1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ff2d52b1bdc4fea9314fc01c5a983da~tplv-k3u1fbpfcp-watermark.ima ...
隨著技術的不斷發展，傳統的開發方式使得系統的複雜度越來越高。在傳統開發過程中，一個小小的改動或者一個小功能的增加可能會導致整體邏輯的修改，造成牽一發而動全身的情況。為瞭解決這個問題，我們採用了組件化的開發模式。通過組件化開發，可以有效地實現單獨開發，單獨維護，而且它們之間可以隨意的進行組合。大大提升了開發的效率，降低了維護的成本。
本文將介紹一款組件：自定義精美商品分類組件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>
//高德SDK
export 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>
