前端Vue自定义精美商品分类组件category 可用于电商应用分类页面

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

本文将介绍一款组件:自定义精美商品分类组件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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL踩坑之sql_mode的用法

目录 定义 报错重现 ​编辑 原因分析 sql_mode值说明 查看当前sql_mode 设置sql_mode 定义 什么是sql_mode?玩了这么久的MySQL语句࿰

SpringBoot整合Zookeeper

引入Jar包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>s…

JAVA开发工具-maven的安装与配置(最新最详细教程)

引言 Maven项目对象模型(POM)&#xff0c;可以通过一小段描述信息来管理项目的构建&#xff0c;报告和文档的项目管理工具 软件。 Maven 除了以程序构建能力为特色之外&#xff0c;还提供高级项目管理工具。由于 Maven 的缺省构建规则有较 高的可重用性&#xff0c;所以常常用两…

模电专题-MOS管的放大电路分析

在实际应用中&#xff0c;我们经常会使用到功率MOS&#xff0c;这时通常不会将它当成一个开关使用&#xff0c;而是当成一个放大器来使用&#xff0c;那这就需要让其工作在放大状态。 参考下图中的mos管的特性曲线&#xff0c;右图中的输出特性曲线中有一根红色的分界线&#x…

C# 进程

C# 进程 进程的命名空间是&#xff1a; using System.Diagnostics;1.获取当前计算机正在运行所有的进程 Process[] processes Process.GetProcesses(); for (int i 0; i < processes.Length; i) {Console.WriteLine(processes[i]); } Console.ReadKey();2.通过进程打开…

竞速榜实时离线对数方案演进介绍 | 京东云技术团队

一、背景 竞速榜是大促期间各采销群提供的基于京东实时销售数据的排行榜&#xff0c;同样应对大促流量洪峰场景&#xff0c;通过榜单撬动品牌在京东增加资源投入。竞速榜基于用户配置规则进行实时数据计算&#xff0c;榜单排名在大促期间实时变化&#xff0c;相关排名数据在微…

【雕爷学编程】Arduino动手做(181)---Maixduino AI开发板2

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

roop 视频换脸

roop: one click face swap. 只用一张人脸图片&#xff0c;就能完成视频换脸。 项目地址&#xff1a; https://github.com/s0md3v/roopColab 部署&#xff1a; https://github.com/dream80/roop_colab 本文是本地部署的实践记录。 环境基础 OS: Ubuntu 22.04.2 LTSKernel: 5…

操作系统专栏2-文件系统from小林coding

文件系统 文件系统构成虚拟文件系统文件的使用文件的存储连续存储非连续空间存放方式链表方式索引方式 Linux文件的实现方式 空闲分区的管理文件系统结构目录的存储软链接和硬链接 文件系统构成 Linux的设计哲学有一点很重要:一切皆文件,不仅仅是普通的文件和目录,就连块设备,…

程序员面试金典17.*

文章目录 17.01 不用加号的加法17.04 消失的数字17.05字母与数字17.06 2出现的次数17.07 婴儿名字17.08 马戏团人塔17.09 第k个数17.10 主要元素17.11 单词距离17.12 BiNode17.13 恢复空格&#xff08;未做&#xff0c;字典树dp&#xff09;17.14 最小K个数17.15 最长单词17.16…

Golang进阶学习

Golang进阶学习 视频地址&#xff1a;https://www.bilibili.com/video/BV1Pg41187AS?p35 1、包 1.1、包的引入 使用包的原因&#xff1a; 我们不可能把所有函数放在同一个源文件中&#xff0c;可以分门别类的放在不同的文件中 解决同名问题&#xff0c;同一个文件中不可以…

webpack基础知识一:说说你对webpack的理解?解决了什么问题?

一、背景 Webpack 最初的目标是实现前端项目的模块化&#xff0c;旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候&#xff0c;我们会通过文件划分的形式实现模块化&#xff0c;也就是将每个功能及其相关状态数据各自单独放到不同的JS 文件中 约定每个文件是一…

数字孪生的「三张皮」问题:数据隐私、安全与伦理挑战

引言 随着数字化时代的来临&#xff0c;数据成为了当今社会的宝贵资源。然而&#xff0c;数据的广泛使用也带来了一系列隐私、安全与伦理挑战。数字孪生作为一种虚拟的数字化实体&#xff0c;通过收集和分析大量数据&#xff0c;模拟和预测现实世界中的各种情境&#xff0c;为…

windows美化任务栏,不使用软件

1.任务栏透明: 效果图: (1).winr打开命令行 输入regedit回车打开注册表 regedit (2).在注册表中打开 \HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced 这个路径 \HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explore…

c++ http url encode decode

在C++中,可以使用以下方法对URL进行编码和解码: URL编码:#include <iostream> #include <string> #include <sstream> #include <iomanip>std::string urlEncode

(自控原理)自动控制的分类与基本要求

一、分类 1、线性连续控制系统 2、非线性控制系统 判断是时变时不变看的是系数&#xff0c;判断线性还是非线性看的是变量 二、基本要求 三、自动控制的分析方法

C++库函数——String类的模拟实现

目录 ①String类的主体 ②String类的具体实现 1.构造函数、拷贝构造函数、赋值运算符、析构函数 ⑴构造函数 ⑵拷贝构造函数 ⑶赋值运算符 ⑷析构函数 2.迭代器&#xff08;范围for的实现原理&#xff09; 3.修改:push_back, apppend, , clear, swap, c_str ⑴push_b…

如何设计一个自动化测试框架?

一个成熟的测试框架主要由 4 部分组成&#xff1a;基础模块、管理模块、运行模块和统计模块 基础模块 底层核心库 一般指用于操作被测试应用程序的第三方库&#xff0c;例如在 Web 端的 Selenium/WebDriver。如API端的Requests 对象库 PO模式中的页面对象 可重用组件 如一些…

Spring系列二:基于注解配置bean【建议收藏】

文章目录 &#x1f497;通过注解配置bean&#x1f35d;基本介绍&#x1f35d;快速入门&#x1f35d;注意事项和细节 &#x1f497;自己实现Spring注解配置Bean机制&#x1f35d;需求说明&#x1f35d;思路分析&#x1f35d;注意事项和细节 &#x1f497;自动装配 Autowired&…

特性快闪:使用 Databend 玩转 Iceberg

作者&#xff1a;尚卓燃&#xff08;PsiACE&#xff09;澳门科技大学在读硕士&#xff0c;Databend 研发工程师实习生 Apache OpenDAL(Incubating) Committer https://github.com/PsiACE 几周前&#xff0c;Databricks 和 Snowflake 召开了各自的年度大会&#xff0c;除了今年一…