微信小程序之 SideBar（侧栏分类）

项目目录：

模拟数据：

utils / data.js

function getSData() {var data = [{"id": 1,"tree": {"id": 1,"desc": "宝宝奶粉","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 1,"tree": {"id": 1,"desc": "牛奶粉","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E7%89%9B%E5%A5%B6%E7%B2%89.jpg","popular": null,"nodes": [{"id": 157,"tree": {"id": 157,"desc": null,"desc2": "a2 PLATINUM","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2Fa2.jpg","popular": 157,"nodes": null}},{"id": 7,"tree": {"id": 7,"desc": "德国爱他美","desc2": "Aptamil","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E7%88%B1%E4%BB%96%E7%BE%8E.jpg","popular": 7,"nodes": null}},{"id": 161,"tree": {"id": 161,"desc": "爱他美白金","desc2": "Aptamil pro","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo/%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89/%E7%99%BD%E9%87%91%E5%A5%B6%E7%B2%89-1.jpg","popular": 161,"nodes": null}},{"id": 158,"tree": {"id": 158,"desc": "澳洲爱他美","desc2": "Aptamil","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E6%BE%B3%E6%B4%B2%E7%88%B1%E4%BB%96%E7%BE%8E.jpg","popular": 158,"nodes": null}},{"id": 8,"tree": {"id": 8,"desc": "荷兰牛栏","desc2": "Nutrilon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E7%89%9B%E6%A0%8F.jpg","popular": 8,"nodes": null}},{"id": 166,"tree": {"id": 166,"desc": "英国牛栏","desc2": "Cow&Cate","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo/%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89/%E8%8B%B1%E5%9B%BD%E7%89%9B%E6%A0%8Flogo.jpeg","popular": 166,"nodes": null}},{"id": 9,"tree": {"id": 9,"desc": "德国喜宝有机","desc2": "HiPP","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E5%96%9C%E5%AE%9D.jpg","popular": 9,"nodes": null}},{"id": 11,"tree": {"id": 11,"desc": "德国喜宝益生菌","desc2": "HiPP","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E5%96%9C%E5%AE%9D.jpg","popular": 11,"nodes": null}},{"id": 13,"tree": {"id": 13,"desc": "澳洲贝拉米","desc2": "BELLMAY'S","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E8%B4%9D%E6%8B%89%E7%B1%B3.jpg","popular": 13,"nodes": null}},{"id": 14,"tree": {"id": 14,"desc": "荷兰美素","desc2": "Hero Baby","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E8%8D%B7%E5%85%B0%E7%BE%8E%E7%B4%A0.jpg","popular": 14,"nodes": null}}]}}]}},{"id": 2,"tree": {"id": 2,"desc": "纸尿裤","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 4,"tree": {"id": 4,"desc": "纸尿裤","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4.jpg","popular": null,"nodes": [{"id": 16,"tree": {"id": 16,"desc": "花王","desc2": "Merries","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E8%8A%B1%E7%8E%8B.jpg","popular": 16,"nodes": null}},{"id": 17,"tree": {"id": 17,"desc": "大王","desc2": "Goon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E5%A4%A7%E7%8E%8B.jpg","popular": 17,"nodes": null}},{"id": 18,"tree": {"id": 18,"desc": "尤妮佳","desc2": "Moony","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E5%B0%A4%E4%BD%B3%E5%A6%AE.jpg","popular": 18,"nodes": null}}]}},{"id": 29,"tree": {"id": 29,"desc": "湿巾","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E6%B9%BF%E5%B7%BE.jpg","popular": null,"nodes": [{"id": 49,"tree": {"id": 49,"desc": "贝亲","desc2": "Pigeon","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E8%B4%9D%E4%BA%B2.jpg","popular": null,"nodes": null}},{"id": 16,"tree": {"id": 16,"desc": "花王","desc2": "Merries","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E8%8A%B1%E7%8E%8B.jpg","popular": 16,"nodes": null}}]}}]}},{"id": 3,"tree": {"id": 3,"desc": "辅食营养","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 10,"tree": {"id": 10,"desc": "宝宝营养","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%AE%9D%E5%AE%9D%E8%90%A5%E5%85%BB.jpg","popular": null,"nodes": [{"id": 114,"tree": {"id": 114,"desc": "挪帝克","desc2": "NORDIC NATURALS","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 34,"tree": {"id": 34,"desc": "童年时光","desc2": "ChildLife","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FChildLife.jpg","popular": 34,"nodes": null}},{"id": 35,"tree": {"id": 35,"desc": "","desc2": "Bio Island","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FBio-Island-1.jpg","popular": 35,"nodes": null}}]}}]}},{"id": 4,"tree": {"id": 4,"desc": "母婴专区","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 11,"tree": {"id": 11,"desc": "喂养用具","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%96%82%E5%85%BB%E7%94%A8%E5%85%B7.jpg","popular": null,"nodes": [{"id": 63,"tree": {"id": 63,"desc": "","desc2": "NUK","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 52,"tree": {"id": 52,"desc": "啾啾","desc2": "chuchu","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2Fchuchu.jpg","popular": null,"nodes": null}},{"id": 60,"tree": {"id": 60,"desc": "","desc2": "Born free","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2Fbornfree.jpg","popular": 60,"nodes": null}},{"id": 24,"tree": {"id": 24,"desc": "可么多么","desc2": "comotomo","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2Fcomotomo.jpg","popular": 24,"nodes": null}},{"id": 62,"tree": {"id": 62,"desc": "","desc2": "boon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2Fboon.jpg","popular": 62,"nodes": null}},{"id": 27,"tree": {"id": 27,"desc": "膳魔师","desc2": "THERMOS","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FTHERMOS.jpg","popular": 27,"nodes": null}},{"id": 28,"tree": {"id": 28,"desc": "","desc2": "thinkbaby","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2Fthinkbaby.jpg","popular": 28,"nodes": null}},{"id": 29,"tree": {"id": 29,"desc": "麦肯齐","desc2": "munchkin","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FMunchkin.jpg","popular": 29,"nodes": null}},{"id": 30,"tree": {"id": 30,"desc": "","desc2": "Lansinoh","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2Flansionoh.jpg","popular": 30,"nodes": null}},{"id": 50,"tree": {"id": 50,"desc": "和光堂","desc2": "WaKoDo","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%85%89%E5%90%88%E5%A0%82.jpg","popular": 50,"nodes": null}}]}},{"id": 9,"tree": {"id": 9,"desc": "宝宝洗护","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%AE%9D%E5%AE%9D%E6%B4%97%E6%8A%A4.jpg","popular": null,"nodes": [{"id": 51,"tree": {"id": 51,"desc": "小林制药","desc2": "KOBAYASHI","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%B0%8F%E6%9E%97%E5%88%B6%E8%8D%AF.jpg","popular": null,"nodes": null}},{"id": 49,"tree": {"id": 49,"desc": "贝亲","desc2": "Pigeon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E8%B4%9D%E4%BA%B2.jpg","popular": null,"nodes": null}},{"id": 31,"tree": {"id": 31,"desc": "加州宝宝","desc2": "CALIFORNIA BABY","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%8A%A0%E5%B7%9E%E5%AE%9D%E5%AE%9D.jpg","popular": 31,"nodes": null}},{"id": 32,"tree": {"id": 32,"desc": "艾维诺","desc2": "Aveeno","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FAveeno.jpg","popular": 32,"nodes": null}},{"id": 33,"tree": {"id": 33,"desc": "小蜜蜂","desc2": "BURT'S BEES","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%B0%8F%E8%9C%9C%E8%9C%82.jpg","popular": 33,"nodes": null}},{"id": 50,"tree": {"id": 50,"desc": "和光堂","desc2": "WaKoDo","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%85%89%E5%90%88%E5%A0%82.jpg","popular": 50,"nodes": null}}]}},{"id": 12,"tree": {"id": 12,"desc": "宝宝口腔护理","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%AE%9D%E5%AE%9D%E5%8F%A3%E8%85%94%E6%8A%A4%E7%90%86.jpg","popular": null,"nodes": [{"id": 113,"tree": {"id": 113,"desc": "香蕉宝宝","desc2": "BABY BANANA","level": null,"logo": "","popular": null,"nodes": null}},{"id": 43,"tree": {"id": 43,"desc": "狮王","desc2": "Lion","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E7%8B%AE%E7%8E%8B.jpg","popular": null,"nodes": null}},{"id": 49,"tree": {"id": 49,"desc": "贝亲","desc2": "Pigeon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E8%B4%9D%E4%BA%B2.jpg","popular": null,"nodes": null}}]}},{"id": 13,"tree": {"id": 13,"desc": "宝宝玩具","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%AE%9D%E5%AE%9D%E7%8E%A9%E5%85%B7.jpg","popular": null,"nodes": [{"id": 29,"tree": {"id": 29,"desc": "麦肯齐","desc2": "munchkin","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FMunchkin.jpg","popular": 29,"nodes": null}}]}},{"id": 14,"tree": {"id": 14,"desc": "孕期营养","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%AD%95%E6%9C%9F%E8%90%A5%E5%85%BB.jpg","popular": null,"nodes": [{"id": 36,"tree": {"id": 36,"desc": "澳佳宝","desc2": "BLACKMORES","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FBlackmores-1.jpg","popular": null,"nodes": null}}]}},{"id": 15,"tree": {"id": 15,"desc": "产后哺乳","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E4%BA%A7%E5%90%8E%E5%93%BA%E4%B9%B3.jpg","popular": null,"nodes": [{"id": 82,"tree": {"id": 82,"desc": "地球妈妈","desc2": "Earth Mama","level": null,"logo": "","popular": null,"nodes": null}},{"id": 30,"tree": {"id": 30,"desc": "","desc2": "Lansinoh","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2Flansionoh.jpg","popular": 30,"nodes": null}}]}}]}},{"id": 5,"tree": {"id": 5,"desc": "护肤美体","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 17,"tree": {"id": 17,"desc": "护肤美肌","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E8%82%8C.jpg","popular": null,"nodes": [{"id": 91,"tree": {"id": 91,"desc": "贺本清","desc2": "Herbacin","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 72,"tree": {"id": 72,"desc": "","desc2": "Lucas","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 37,"tree": {"id": 37,"desc": "","desc2": "Swisse","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2Fswisse-1.jpg","popular": null,"nodes": null}},{"id": 64,"tree": {"id": 64,"desc": "花王碧柔","desc2": "Biore","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 43,"tree": {"id": 43,"desc": "狮王","desc2": "Lion","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E7%8B%AE%E7%8E%8B.jpg","popular": null,"nodes": null}},{"id": 58,"tree": {"id": 58,"desc": "","desc2": "UNIMAT","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2FUNIMAT.jpg","popular": null,"nodes": null}},{"id": 67,"tree": {"id": 67,"desc": "资生堂","desc2": "Shiseido","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 148,"tree": {"id": 148,"desc": null,"desc2": "LG","level": "level3","logo": null,"popular": null,"nodes": null}},{"id": 36,"tree": {"id": 36,"desc": "澳佳宝","desc2": "BLACKMORES","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FBlackmores-1.jpg","popular": null,"nodes": null}},{"id": 69,"tree": {"id": 69,"desc": "北海道","desc2": "Loshi","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 123,"tree": {"id": 123,"desc": null,"desc2": "G&M","level": "level3","logo": null,"popular": null,"nodes": null}},{"id": 87,"tree": {"id": 87,"desc": "贝德玛","desc2": "BIODERMA","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 121,"tree": {"id": 121,"desc": "伊思","desc2": "t'S SKIN","level": "level3","logo": "http://hqxz.oss-cn-beijing.aliyuncs.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2F%E4%BC%8A%E6%80%9D.jpg","popular": 121,"nodes": null}},{"id": 46,"tree": {"id": 46,"desc": "宝丽","desc2": "Pola","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2Fpola.jpg","popular": 46,"nodes": null}},{"id": 96,"tree": {"id": 96,"desc": "","desc2": "SNP","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2FSNP.jpg","popular": 96,"nodes": null}},{"id": 98,"tree": {"id": 98,"desc": "丽得姿","desc2": "LEADERS","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2F%E4%B8%BD%E5%BE%97%E5%A7%BF.jpg","popular": 98,"nodes": null}},{"id": 133,"tree": {"id": 133,"desc": "悦诗风吟","desc2": "innisfree","level": "level3","logo": "http://hqxz.oss-cn-beijing.aliyuncs.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2Finnisfree.jpg","popular": 133,"nodes": null}},{"id": 146,"tree": {"id": 146,"desc": null,"desc2": "AHC","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2FAHC.jpg","popular": 146,"nodes": null}}]}},{"id": 18,"tree": {"id": 18,"desc": "彩妆隔离","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2F%E5%BD%A9%E5%A6%86.jpg","popular": null,"nodes": [{"id": 31,"tree": {"id": 31,"desc": "加州宝宝","desc2": "CALIFORNIA BABY","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%8A%A0%E5%B7%9E%E5%AE%9D%E5%AE%9D.jpg","popular": null,"nodes": null}},{"id": 87,"tree": {"id": 87,"desc": "贝德玛","desc2": "BIODERMA","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 49,"tree": {"id": 49,"desc": "贝亲","desc2": "Pigeon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E8%B4%9D%E4%BA%B2.jpg","popular": null,"nodes": null}},{"id": 67,"tree": {"id": 67,"desc": "资生堂","desc2": "Shiseido","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 66,"tree": {"id": 66,"desc": "嘉娜宝","desc2": "Kanebo","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2F%E5%98%89%E5%A8%9C%E5%AE%9D.jpg","popular": 66,"nodes": null}},{"id": 46,"tree": {"id": 46,"desc": "宝丽","desc2": "Pola","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2Fpola.jpg","popular": 46,"nodes": null}}]}}]}},{"id": 6,"tree": {"id": 6,"desc": "营养保健","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 19,"tree": {"id": 19,"desc": "女性保养","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2F%E5%A5%B3%E6%80%A7%E4%BF%9D%E5%85%BB.jpg","popular": null,"nodes": [{"id": 35,"tree": {"id": 35,"desc": "","desc2": "Bio Island","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FBio-Island-1.jpg","popular": null,"nodes": null}},{"id": 36,"tree": {"id": 36,"desc": "澳佳宝","desc2": "BLACKMORES","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FBlackmores-1.jpg","popular": 36,"nodes": null}},{"id": 37,"tree": {"id": 37,"desc": "","desc2": "Swisse","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2Fswisse-1.jpg","popular": 37,"nodes": null}},{"id": 38,"tree": {"id": 38,"desc": "","desc2": "red seal","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FRed-Seal-1.jpg","popular": 38,"nodes": null}},{"id": 76,"tree": {"id": 76,"desc": "健安喜","desc2": "GNC","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FGNC.jpg","popular": 76,"nodes": null}},{"id": 55,"tree": {"id": 55,"desc": "铁元","desc2": "Salus","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2Fsalus.jpg","popular": 55,"nodes": null}}]}},{"id": 20,"tree": {"id": 20,"desc": "男性健康","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2F%E7%94%B7%E6%80%A7%E5%81%A5%E5%BA%B7.jpg","popular": null,"nodes": [{"id": 37,"tree": {"id": 37,"desc": "","desc2": "Swisse","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2Fswisse-1.jpg","popular": 37,"nodes": null}}]}},{"id": 21,"tree": {"id": 21,"desc": "中老年健康","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2F%E4%B8%AD%E8%80%81%E5%B9%B4%E5%81%A5%E5%BA%B7.jpg","popular": null,"nodes": [{"id": 36,"tree": {"id": 36,"desc": "澳佳宝","desc2": "BLACKMORES","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FBlackmores-1.jpg","popular": 36,"nodes": null}}]}},{"id": 22,"tree": {"id": 22,"desc": "通用营养","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2F%E9%80%9A%E7%94%A8%E8%90%A5%E5%85%BB.jpg","popular": null,"nodes": [{"id": 37,"tree": {"id": 37,"desc": "","desc2": "Swisse","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2Fswisse-1.jpg","popular": 37,"nodes": null}},{"id": 40,"tree": {"id": 40,"desc": "德国双心","desc2": "Doppel herz","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FDoppelherz.jpg","popular": 40,"nodes": null}},{"id": 76,"tree": {"id": 76,"desc": "健安喜","desc2": "GNC","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FGNC.jpg","popular": 76,"nodes": null}}]}}]}},{"id": 7,"tree": {"id": 7,"desc": "居家日用","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 25,"tree": {"id": 25,"desc": "护发沐浴","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E6%8A%A4%E5%8F%91%E6%B2%90%E6%B5%B4.jpg","popular": null,"nodes": [{"id": 148,"tree": {"id": 148,"desc": null,"desc2": "LG","level": "level3","logo": null,"popular": null,"nodes": null}},{"id": 112,"tree": {"id": 112,"desc": "箭牌","desc2": "Mane 'n Tail","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E7%AE%AD%E7%89%8C-1.jpg","popular": 112,"nodes": null}}]}},{"id": 26,"tree": {"id": 26,"desc": "口腔健康","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E5%8F%A3%E8%85%94%E5%81%A5%E5%BA%B7.jpg","popular": null,"nodes": [{"id": 38,"tree": {"id": 38,"desc": "","desc2": "red seal","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FRed-Seal-1.jpg","popular": null,"nodes": null}},{"id": 43,"tree": {"id": 43,"desc": "狮王","desc2": "Lion","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E7%8B%AE%E7%8E%8B.jpg","popular": 43,"nodes": null}}]}},{"id": 27,"tree": {"id": 27,"desc": "家居清洁","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E5%B1%85%E5%AE%B6%E6%B8%85%E6%B4%81.jpg","popular": null,"nodes": [{"id": 70,"tree": {"id": 70,"desc": "","desc2": "Febreze","level": null,"logo": "","popular": null,"nodes": null}},{"id": 58,"tree": {"id": 58,"desc": "","desc2": "UNIMAT","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2FUNIMAT.jpg","popular": null,"nodes": null}},{"id": 56,"tree": {"id": 56,"desc": "","desc2": "goat soap","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2Fgoat-soap.jpg","popular": 56,"nodes": null}}]}},{"id": 24,"tree": {"id": 24,"desc": "日常护理","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E5%8D%AB%E7%94%9F%E5%B7%BE.jpg","popular": null,"nodes": [{"id": 16,"tree": {"id": 16,"desc": "花王","desc2": "Merries","level": null,"logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E8%8A%B1%E7%8E%8B.jpg","popular": null,"nodes": null}},{"id": 58,"tree": {"id": 58,"desc": "","desc2": "UNIMAT","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2FUNIMAT.jpg","popular": null,"nodes": null}},{"id": 64,"tree": {"id": 64,"desc": "花王碧柔","desc2": "Biore","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 147,"tree": {"id": 147,"desc": "参天","desc2": "SANTEN","level": "level3","logo": null,"popular": null,"nodes": null}}]}}]}},{"id": 8,"tree": {"id": 8,"desc": "进口美食","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 28,"tree": {"id": 28,"desc": "进口零食","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB%2F%E8%BF%9B%E5%8F%A3%E7%BE%8E%E9%A3%9F%2F%E8%BF%9B%E5%8F%A3%E9%9B%B6%E9%A3%9F.jpg","popular": null,"nodes": [{"id": 119,"tree": {"id": 119,"desc": "德运","desc2": "DEVONDALE","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 41,"tree": {"id": 41,"desc": "新西兰康维他","desc2": "COMVITA","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FCOMVITA.jpg","popular": 41,"nodes": null}}]}}]}},{"id": 9,"tree": {"id": 9,"desc": "轻奢女装","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 91,"tree": {"id": 91,"desc": "轻奢女装","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB/%E6%9C%8D%E9%A5%B0%E7%AE%B1%E5%8C%85/%E6%BD%AE%E6%B5%81%E5%A5%B3%E8%A3%85.png","popular": null,"nodes": [{"id": 160,"tree": {"id": 160,"desc": null,"desc2": "DVF","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo/%E6%9C%8D%E9%A5%B0%E7%AE%B1%E5%8C%85/DVF-logo.png","popular": 160,"nodes": null}}]}}]}},{"id": 10,"tree": {"id": 10,"desc": "秒杀特惠清仓","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 101,"tree": {"id": 101,"desc": "秒杀","desc2": null,"level": "level2","logo": null,"popular": null,"nodes": [{"id": 23,"tree": {"id": 23,"desc": "贝塔","desc2": "Betta","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E8%B4%9D%E5%A1%94.jpg","popular": null,"nodes": null}},{"id": 97,"tree": {"id": 97,"desc": "肌肤之钥","desc2": "CPB","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2FCPB-%E8%82%8C%E8%82%A4%E4%B9%8B%E9%92%A5.jpg","popular": null,"nodes": null}},{"id": 106,"tree": {"id": 106,"desc": "","desc2": "Sudocrem","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 148,"tree": {"id": 148,"desc": null,"desc2": "LG","level": "level3","logo": null,"popular": null,"nodes": null}},{"id": 81,"tree": {"id": 81,"desc": "芙丽芳丝","desc2": "freeplus","level": "level3","logo": "","popular": null,"nodes": null}},{"id": 21,"tree": {"id": 21,"desc": "嘉宝","desc2": "Gerber","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%BE%85%E9%A3%9F%E8%90%A5%E5%85%BB%2F%E5%98%89%E5%AE%9D.jpg","popular": null,"nodes": null}},{"id": 27,"tree": {"id": 27,"desc": "膳魔师","desc2": "THERMOS","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FTHERMOS.jpg","popular": null,"nodes": null}},{"id": 17,"tree": {"id": 17,"desc": "大王","desc2": "Goon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E5%A4%A7%E7%8E%8B.jpg","popular": null,"nodes": null}},{"id": 42,"tree": {"id": 42,"desc": "","desc2": "Reveur","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2Freveur.jpg","popular": null,"nodes": null}},{"id": 103,"tree": {"id": 103,"desc": "吕","desc2": "","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%B1%85%E5%AE%B6%E6%97%A5%E7%94%A8%2F%E5%90%95.jpg","popular": null,"nodes": null}},{"id": 46,"tree": {"id": 46,"desc": "宝丽","desc2": "Pola","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2Fpola.jpg","popular": null,"nodes": null}},{"id": 29,"tree": {"id": 29,"desc": "麦肯齐","desc2": "munchkin","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FMunchkin.jpg","popular": null,"nodes": null}},{"id": 73,"tree": {"id": 73,"desc": "佳思敏","desc2": "Nature's Way","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2F%E4%BD%B3%E6%80%9D%E6%95%8F.jpg","popular": null,"nodes": null}},{"id": 16,"tree": {"id": 16,"desc": "花王","desc2": "Merries","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E8%8A%B1%E7%8E%8B.jpg","popular": null,"nodes": null}},{"id": 18,"tree": {"id": 18,"desc": "尤妮佳","desc2": "Moony","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E7%BA%B8%E5%B0%BF%E8%A3%A4%2F%E5%B0%A4%E4%BD%B3%E5%A6%AE.jpg","popular": null,"nodes": null}},{"id": 49,"tree": {"id": 49,"desc": "贝亲","desc2": "Pigeon","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E8%B4%9D%E4%BA%B2.jpg","popular": null,"nodes": null}}]}},{"id": 102,"tree": {"id": 102,"desc": "特惠清仓","desc2": null,"level": "level2","logo": null,"popular": null,"nodes": [{"id": 135,"tree": {"id": 135,"desc": "雪花秀","desc2": "Sulwhasoo","level": null,"logo": "http://hqxz.oss-cn-beijing.aliyuncs.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2F%E9%9B%AA%E8%8A%B1%E7%A7%80.jpg","popular": null,"nodes": null}},{"id": 37,"tree": {"id": 37,"desc": "","desc2": "Swisse","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2Fswisse-1.jpg","popular": null,"nodes": null}},{"id": 9,"tree": {"id": 9,"desc": "德国喜宝有机","desc2": "HiPP","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E5%96%9C%E5%AE%9D.jpg","popular": null,"nodes": null}},{"id": 133,"tree": {"id": 133,"desc": "悦诗风吟","desc2": "innisfree","level": "level3","logo": "http://hqxz.oss-cn-beijing.aliyuncs.com/%E5%93%81%E7%89%8Clogo%2F%E6%8A%A4%E8%82%A4%E7%BE%8E%E4%BD%93%2Finnisfree.jpg","popular": null,"nodes": null}},{"id": 11,"tree": {"id": 11,"desc": "德国喜宝益生菌","desc2": "HiPP","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E5%AE%9D%E5%AE%9D%E5%A5%B6%E7%B2%89%2F%E5%96%9C%E5%AE%9D.jpg","popular": null,"nodes": null}},{"id": 22,"tree": {"id": 22,"desc": "美林","desc2": "Mellin","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%BE%85%E9%A3%9F%E8%90%A5%E5%85%BB%2F%E7%BE%8E%E6%9E%97.jpg","popular": null,"nodes": null}},{"id": 116,"tree": {"id": 116,"desc": "简尼","desc2": "Jensens","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2FJensen's.jpg","popular": null,"nodes": null}},{"id": 36,"tree": {"id": 36,"desc": "澳佳宝","desc2": "BLACKMORES","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FBlackmores-1.jpg","popular": null,"nodes": null}},{"id": 76,"tree": {"id": 76,"desc": "健安喜","desc2": "GNC","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FGNC.jpg","popular": null,"nodes": null}},{"id": 54,"tree": {"id": 54,"desc": "","desc2": "Health Care","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E8%90%A5%E5%85%BB%E4%BF%9D%E5%81%A5%2FHealthy-Care.jpg","popular": null,"nodes": null}}]}}]}},{"id": 11,"tree": {"id": 11,"desc": "时尚箱包","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 111,"tree": {"id": 111,"desc": "时尚箱包","desc2": null,"level": "level2","logo": "http://image.huanqiuxiaozhen.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB/%E6%9C%8D%E9%A5%B0%E7%AE%B1%E5%8C%85/%E7%AE%B1%E5%8C%85.jpg","popular": null,"nodes": [{"id": 167,"tree": {"id": 167,"desc": "施华洛世奇","desc2": "SWAROVSKI","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo/%E6%9C%8D%E9%A5%B0%E7%AE%B1%E5%8C%85/%E6%96%BD%E5%8D%8E%E6%B4%9B%E4%B8%96%E5%A5%87logo.jpeg","popular": 167,"nodes": null}}]}}]}},{"id": 12,"tree": {"id": 12,"desc": "专场大促","desc2": null,"level": "level1","logo": null,"popular": null,"nodes": [{"id": 121,"tree": {"id": 121,"desc": "原产国奶粉专场","desc2": null,"level": "level2","logo": null,"popular": null,"nodes": [{"id": 50,"tree": {"id": 50,"desc": "和光堂","desc2": "WaKoDo","level": "level3","logo": "http://image.huanqiuxiaozhen.com/%E5%93%81%E7%89%8Clogo%2F%E6%AF%8D%E5%A9%B4%E4%B8%93%E5%8C%BA%2F%E5%85%89%E5%90%88%E5%A0%82.jpg","popular": null,"nodes": null}}]}}]}}];return data || [];
}
module.exports = {getSData: getSData
}

模板一：

1.逻辑层

audiobook.js

// pages/audiobook/audiobook.js
var data_ = require('../../utils/data.js')Page({/*** 页面的初始数据*/data: {navLeftItems: [],navRightItems: [],curNav: 1,curIndex: 0},/*** 生命周期函数--监听页面加载*/onLoad: function () {this.setData({navLeftItems: data_.getSData(),navRightItems: data_.getSData()})},//事件处理函数  switchRightTab: function (e) {// 获取item项的id，和数组的下标值  let id = e.target.dataset.id,index = parseInt(e.target.dataset.index);// 把点击到的某一项，设为当前index  this.setData({curNav: id,curIndex: index})}
})

2.页面布局

audiobook.wxml

<!--pages/audiobook/audiobook.wxml-->
<!--主盒子-->  
<view class="container">  <!--左侧栏-->  <view class="nav_left">  <block wx:for="{{navLeftItems}}" wx:key="id">  <!--当前项的id等于item项的id，那个就是当前状态-->  <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->  <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>  </block>  </view>  <!--右侧栏-->  <view class="nav_right">  <!--如果有数据，才遍历项-->  <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">  <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}" wx:key="id">  <view class="nav_right_items">  <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">  <!--用view包裹图片组合，如果有图片就用，无图片提供就使用50x30的这个默认图片-->  <view>                <block wx:if="{{item.tree.logo}}">  <image src="{{item.tree.logo}}"></image>  </block>  <block wx:else>  <image src="http://temp.im/50x30"></image>  </block>  </view>  <!--如果有文字，就用文字；无文字就用其他-->  <view wx:if="{{item.tree.desc}}">  <text>{{item.tree.desc}}</text>  </view>  <view wx:else>  <text>{{item.tree.desc2}}</text>  </view>  </navigator>  </view>  </block>  </view>  <!--如果无数据，则显示数据-->  <view wx:else>暂无数据</view>  </view>  
</view>

3.样式

audiobook.wxss

/* pages/audiobook/audiobook.wxss */
page{  background: #f5f5f5;  
}  
/*总体主盒子*/  
.container {  position: relative;  width: 100%;  height: 100%;  background-color: #fff;  color: #939393;  
}  /*左侧栏主盒子*/  
.nav_left{  /*设置行内块级元素（没使用定位）*/  display: inline-block;  width: 25%;  height: 100%;  /*主盒子设置背景色为灰色*/  background: #f5f5f5;  text-align: center;  
}  
/*左侧栏list的item*/  
.nav_left .nav_left_items{  /*每个高30px*/  height: 30px;  /*垂直居中*/  line-height: 30px;  /*再设上下padding增加高度，总高42px*/  padding: 6px 0;  /*只设下边线*/  border-bottom: 1px solid #dedede;  /*文字14px*/  font-size: 14px;  
}  
/*左侧栏list的item被选中时*/  
.nav_left .nav_left_items.active{  /*背景色变成白色*/  background: #fff;  
}  /*右侧栏主盒子*/  
.nav_right{  /*右侧盒子使用了绝对定位*/  position: absolute;  top: 0;  right: 0;  flex: 1;  /*宽度75%，高度占满，并使用百分比布局*/  width: 75%;  height: 100%;  padding: 10px;  box-sizing: border-box;  background: #fff;  
}  
/*右侧栏list的item*/  
.nav_right .nav_right_items{  /*浮动向左*/  float: left;  /*每个item设置宽度是33.33%*/  width: 33.33%;  height: 80px;  text-align: center;  
}  
.nav_right .nav_right_items image{  /*被图片设置宽高*/  width: 50px;  height: 30px;  
}  
.nav_right .nav_right_items text{  /*给text设成块级元素*/  display: block;  margin-top: 5px;  font-size: 10px;  /*设置文字溢出部分为...*/  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  
}

4.效果图

 

模板二：

1.逻辑层

mine.js

// pages/mine/mine.js
Page({/*** 页面的初始数据*/data: {cateItems: [{cate_id: 1,cate_name: "护肤",ishaveChild: true,children:[{child_id: 1,name: '洁面皂',image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"},{child_id: 2,name: '卸妆',image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"},{child_id: 3,name: '洁面乳',image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"},{child_id: 4,name: '面部祛角质',image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"}]},{cate_id: 2,cate_name: "彩妆",ishaveChild: true,children:[{child_id: 1,name: '气垫bb',image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"},{child_id: 2,name: '修容/高光',image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"},{child_id: 3,name: '遮瑕',image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg"},{child_id: 4,name: '腮红',image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg"},{child_id: 5,name: '粉饼',image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg"},{child_id: 6,name: '粉底',image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg"},{child_id: 7,name: '蜜粉/散粉',image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg"},{child_id: 8,name: '隔离霜',image: "http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg"}]},{cate_id: 3,cate_name: "香水/香氛",ishaveChild: true,children:[{child_id: 1,name: '淡香水EDT',image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"},{child_id: 2,name: '浓香水EDP',image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"},{child_id: 3,name: '香体走珠',image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg"},{child_id: 4,name: '古龙香水男士的最爱',image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.jpg"}]},{cate_id: 4,cate_name: "个人护理",ishaveChild: false,children: []}],curNav: 1,curIndex: 0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},//事件处理函数  switchRightTab: function (e) {// 获取item项的id，和数组的下标值  let id = e.target.dataset.id,index = parseInt(e.target.dataset.index);// 把点击到的某一项，设为当前index  this.setData({curNav: id,curIndex: index})}
})

2.页面布局

mine.wxml

<!--pages/mine/mine.wxml-->
<!--主盒子-->
<view class="container"><!--左侧栏--><view class="nav_left"><block wx:for="{{cateItems}}" wx:key="id"><!--当前项的id等于item项的id，那个就是当前状态--><!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用--><view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view></block></view><!--右侧栏--><view class="nav_right"><!--如果有数据，才遍历项--><view wx:if="{{cateItems[curIndex].ishaveChild}}"><block wx:for="{{cateItems[curIndex].children}}" wx:key="id"><view class="nav_right_items"><!--界面跳转 --><navigator url="../../detail/detail}}"><image src="{{item.image}}"></image><text>{{item.name}}</text></navigator></view></block></view><!--如果无数据，则显示数据--><view class="nodata_text" wx:else>该分类暂无数据</view></view>
</view>

3.样式

mine.wxss

/* pages/mine/mine.wxss */
page{  background: #f5f5f5;  
}  
/*总体主盒子*/  
.container {  position: relative;  width: 100%;  height: 100%;  background-color: #fff;  color: #939393;  
}/*左侧栏主盒子*/  
.nav_left{  /*设置行内块级元素（没使用定位）*/  display: inline-block;  width: 25%;  height: 100%;  /*主盒子设置背景色为灰色*/  background: #f5f5f5;  text-align: center;  
}  
/*左侧栏list的item*/  
.nav_left .nav_left_items{  /*每个高30px*/  height: 40px;  /*垂直居中*/  line-height: 40px;  /*再设上下padding增加高度，总高42px*/  padding: 6px 0;  /*只设下边线*/  border-bottom: 1px solid #dedede;  /*文字14px*/  font-size: 14px; 
}  
/*左侧栏list的item被选中时*/  
.nav_left .nav_left_items.active{  /*背景色变成白色*/  background: #fff;  color: #f0145a; 
}  
/*右侧栏主盒子*/  
.nav_right{  /*右侧盒子使用了绝对定位*/  position: absolute;  top: 0;  right: 0;  flex: 1;  /*宽度75%，高度占满，并使用百分比布局*/  width: 75%;  height: 1000px;  padding: 10px;  box-sizing: border-box;  background: #fff;  
}  
/*右侧栏list的item*/  
.nav_right .nav_right_items{  /*浮动向左*/  float: left;  /*每个item设置宽度是33.33%*/  width: 33.33%;  height: 120px;  text-align: center;  
}  
.nav_right .nav_right_items image{  /*被图片设置宽高*/  width: 60px;  height: 60px;  margin-top: 15px;  
}  
.nav_right .nav_right_items text{  /*给text设成块级元素*/  display: block;  margin-top: 15px;  font-size: 14px;  color: black;/*设置文字溢出部分为...*/  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  
} 
.nodata_text{color: black;font-size: 14px;  text-align: center;  
}

4.效果图

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

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

相关文章

如何在线查找成千上万的免费电子书

如何在线查找成千上万的免费电子书

You’ve got an ebook reader (or a laptop or netbook with ebook reading software) now you just need some free books to put it to good use. Read on as we show you the best places to score free books online. 您已经有了一个电子书阅读器(或带有电子书阅读软件的笔…
阅读更多...
Spring Bean默认配置为单实例 Spring Bean生命周期

Spring Bean默认配置为单实例 Spring Bean生命周期

2019独角兽企业重金招聘Python工程师标准>>> Spring 的Bean默认的是单例的. 如果不想单例需要如下配置&#xff1a; <bean id"user" class"..." scope"singleton"/> scope"singleton"就是配置这个bean是单例的&#…
阅读更多...
minecraft服务器_如何启动自己的Minecraft服务器进行多人游戏

minecraft服务器_如何启动自己的Minecraft服务器进行多人游戏

minecraft服务器If you’ve played Minecraft, then it’s easy to see how much fun it can be. Running your own server lets you bring all of your friends into the same game, and you can play with rules you get to make or break. It’s the ultimate in an already…
阅读更多...
Spring Boot 2.x（六）：优雅的统一返回值

Spring Boot 2.x（六）：优雅的统一返回值

目录 为什么要统一返回值ReturnVOReturnCode使用ReturnVO使用AOP进行全局异常的处理云撸猫公众号为什么要统一返回值 在我们做后端应用的时候&#xff0c;前后端分离的情况下&#xff0c;我们经常会定义一个数据格式&#xff0c;通常会包含code&#xff0c;message&#xff0c;…
阅读更多...
jhope代码分析以及网站结构

jhope代码分析以及网站结构

如下图所示&#xff0c;为Extjs部分代码提供的网页结构&#xff1a;网站看上去本来是这样的前端采用ExtJS&#xff0c;与后台的SpringMVCSpringHibernate进行数据交互。之前分析过登录的过程&#xff0c;不赘述在loginController处理登录返回结果的最后&#xff0c;如下语句也就…
阅读更多...
Ubuntu下Authentication token manipulation error或者Authentication Failure解决办法

Ubuntu下Authentication token manipulation error或者Authentication Failure解决办法

在Ubuntu18.04使用以下命令出现以下错误: 用passwd为新建用户或者root添加密码:Authentication token manipulation error 切换root用户出现Authentication Failure. 网上出现了大致两种方法: 第一种&#xff1a;用户文件和密码文件被保护&#xff0c;用chattr命令移除保护即可…
阅读更多...
初学者：如何使用虚拟PC将Windows 7安装到虚拟机

初学者：如何使用虚拟PC将Windows 7安装到虚拟机

Continuing in our series covering how to use Virtual PC, this week we’ll be showing you how to install Windows 7 into a virtual machine. It’s a very simple process, but here’s the step-by-step guide for beginners. 继续我们的系列文章&#xff0c;介绍如何使…
阅读更多...
arcgis本地服务快速迁移到新机

arcgis本地服务快速迁移到新机

情景 在本机或服务器发布了几十、几百个gis服务&#xff0c;当换电脑或者换服务器时不可能挨个找源文件重新发布服务&#xff0c;于是就想着既然是本地文件&#xff0c;一定可以拷贝过去的&#xff0c;经过一番搜索&#xff0c;结果如下: 方案一、迁移至新站点 新机站点创建…
阅读更多...
极客大佬用什么电脑_极客特惠：笔记本电脑，高清电视和免费应用

极客大佬用什么电脑_极客特惠：笔记本电脑，高清电视和免费应用

极客大佬用什么电脑If you love new gear but not high prices then we’ve got some deals for you; grab some deeply discounted laptops, monitors and HDTVs, and free mobile apps in this week’s Geek Deals roundup. 如果您喜欢新设备&#xff0c;但不喜欢高价&#x…
阅读更多...
ppt插入html（用office而不是wps）

ppt插入html（用office而不是wps）

最近新get到的技能&#xff0c;在ppt里面插入html&#xff01;注意要用 Microsoft Office PowerPoint 才行&#xff0c;而不是wps&#xff0c;一定要先安装Microsoft Office PowerPoint再执行以下操作。 1、修改注册表的值&#xff0c;才能在PowerPoint中插入 Microsoft Web B…
阅读更多...
如何使用SkyDrive的25 GB作为映射驱动器以方便访问

如何使用SkyDrive的25 GB作为映射驱动器以方便访问

SkyDrive is an online storage system included in Windows Live, which gives you 25 GB of space that you can sync to your desktop. Here’s how to connect it to your Windows 7 computer as a mapped drive. SkyDrive是Windows Live中包含的一个在线存储系统&#xff…
阅读更多...
SpringBoot+Mybatis 框架之 @SelectProvider注解方式搭建

SpringBoot+Mybatis 框架之 @SelectProvider注解方式搭建

之前搭建了Select标签来做SringBootMybatis的集成。这次使用SelectProvider标签的方式搭建一次。 一、搭建SpringBoot的项目 https://start.spring.io/自己配置SpringBoot的项目&#xff0c;点击“Generate Project”按钮就可以下载下来一个配置好的SpringBoot项目。 二、项目结…
阅读更多...
从购买域名到nginx,flask搭建自己的网站

从购买域名到nginx,flask搭建自己的网站

搭建一个只属于自己的网站? 一、注册域名&#xff08;可选*&#xff09; 1.注册阿里云账号 网址&#xff1a;登录&#xff08;注册&#xff09; 2.购买域名&#xff1a;阿里云域名注册 有一元域名、免费域名等。 购买过程中需要创建信息模板&#xff08;必须完成邮箱真实…
阅读更多...
alexa语音实现_如何通过语音删除Alexa录音

alexa语音实现_如何通过语音删除Alexa录音

alexa语音实现Amazon亚马孙Amazon is rolling out new privacy features today for Alexa. In addition to an educational “privacy hub,” the company lets you delete your stored recordings by voice. But it’s off by default; you’ll need to flip a switch. 亚马逊…
阅读更多...
用scrapy框架写爬虫

用scrapy框架写爬虫

爬虫可以发送给引擎的两种请求&#xff1a; # 1、url&#xff1a;# &#xff08;爬虫&#xff09;yield scrapy.Request -> 引擎 -> 调度器&#xff08;发送给调度器入队&#xff09; -> 引擎&#xff08;调度器出队请求于引擎&#xff09;# -> 下载器&#xff08;…
阅读更多...
audacity_如何在Audacity中快速编辑多个文件

audacity_如何在Audacity中快速编辑多个文件

audacityGot a bunch of files that need to be edited the same way? You can automate the process to save time and effort using Audacity’s Chain feature and modify tons of files at the same time. 有一堆需要以相同方式编辑的文件&#xff1f; 您可以使用Audacity…
阅读更多...
通过api管理grafana

通过api管理grafana

1. 生成api key 参考&#xff1a; http://docs.grafana.org/http_api/auth/ 2.点击添加后&#xff0c;生成了个获取一个deshboards的api样例 3.放到linux上运行测试&#xff0c;结果成功返回。 4. 有些api并不支持使用api key 来连接&#xff0c;如下图中的搜索用户接口&#x…
阅读更多...
vue项目将token存在（vuex）store和localstorage中

vue项目将token存在（vuex）store和localstorage中

文章目录一、准备工作和token1、准备工作2、介绍token用法二、创建storage&#xff0c;store&#xff0c;request1、src目录&#xff1a;2、封装storage&#xff08;可选&#xff09;3、创建store4、创建request三、配置代理&#xff0c;封装路由router、设置路由守卫&#xff…
阅读更多...
安卓手电筒_将价值10美元的手电筒砍入超高亮高级灯中

安卓手电筒_将价值10美元的手电筒砍入超高亮高级灯中

安卓手电筒If you’re looking for a bright flashlight without paying an arm and a leg this simple hack modifies a cheap $10 flashlight to be as bright as a $95 one. 如果您要寻找一个明亮的手电筒而又不用付胳膊和腿&#xff0c;这个简单的技巧就可以将便宜的10美元…
阅读更多...
初识 scrapy 框架 - 安装

初识 scrapy 框架 - 安装

前面豆子学习了基本的urllib的模块&#xff0c;通过这个模块可以写一些简单的爬虫文件。如果要处理大中型的爬虫项目&#xff0c;urllib就显得比较low了&#xff0c;这个时候可以使用scrapy框架来实现&#xff0c;很多基本的处理在scrapy里面已经做好了。 首先来安装一下。推荐…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023