微信小程序之 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，一经查实，立即删除！

相关文章

腾讯地图判断点是否在区域内

腾讯地图判断点是否在区域内

链接添加几何计算库&#xff1a;librariesgeometry xxx为自己的key <script charset"utf-8" src"https://map.qq.com/api/gljs?v1.exp&keyxxx&librariesgeometry"></script>调用 TMap.geometry.isPointInPolygon(position, paths)
阅读更多...
如何在线查找成千上万的免费电子书

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

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. 您已经有了一个电子书阅读器(或带有电子书阅读软件的笔…
阅读更多...
【SDOI2008】仪仗队

【SDOI2008】仪仗队

题面 题解 当$(x,y)$能被看到时&#xff0c;$gcd(x,y)1$&#xff0c; 所以可以求$\sum_{i0}^n\sum_{j0}^n[gcd(x,y)1]$ 或者用欧拉函数 代码 #include<bits/stdc.h> #define RG register #define clear(x, y) memset(x, y, sizeof(x)); using namespace std;template<…
阅读更多...
kbone-cli初始化项目，提示‘模板xx不存在’

kbone-cli初始化项目，提示‘模板xx不存在’

取消git代理就好了 git config --global --unset http.proxygit config --global --unset https.proxykbone init my-app跳转目录 cd my-app开发小程序 npm run mp开发 Web npm run web 发布 Web npm run build恭喜你! "my-app"项目初始化成功!
阅读更多...
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;…
阅读更多...
Object defineProperty

Object defineProperty

Object defineProperty一、简介1. 属性表2.互斥性3. get、set的简单使用二、深入1.定义常量2. Object.preventExtensions() 禁止对象拓展(不可逆)3. Object.seal() 密封(不可逆)4. Object.freeze() 冻结(不可逆)三、应用一、简介 defineProperty可以详细的配置一个对象的属性的…
阅读更多...
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;结果如下: 方案一、迁移至新站点 新机站点创建…
阅读更多...
js中 给json对象添加属性和json数组添加元素

js中 给json对象添加属性和json数组添加元素

json对象&#xff1a; 比如现在有一个json对象为jsonObj&#xff0c;需要给这个对象添加新的属性newParam&#xff0c;同时给newParam赋值为pre。做法如下&#xff1a; var jsonObj{param1:22,param2 :33}; 现在给jsonObj添加一个新的属性newParam jsonObj.newParam pre; 新的…
阅读更多...
zabbix中php信息缺失之后的安装

zabbix中php信息缺失之后的安装

安装php下enable bcmath和gettext &#xff08;在安装php时可以添加 --enable-bcmath --enable-gettext&#xff09;1,bcmath安装方法bcmath这个扩展在php源安装包压缩包中都是有的&#xff0c;需要重新编译一下才能够支持&#xff1b;cd php-5.2.7/ext/bcmath&#xff08;源…
阅读更多...
极客大佬用什么电脑_极客特惠：笔记本电脑，高清电视和免费应用

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

极客大佬用什么电脑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…
阅读更多...
Linux内核 TCP/IP、Socket参数调优

Linux内核 TCP/IP、Socket参数调优

详见http://blog.csdn.net/u010009038/article/details/51917460转载于:https://blog.51cto.com/jack88/2063979
阅读更多...
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项目。 二、项目结…
阅读更多...
程鑫峰：1.23日央行推行负利率政策，伦敦金后市行情解析

程鑫峰：1.23日央行推行负利率政策，伦敦金后市行情解析

程鑫峰&#xff1a;1.23日央行推行负利率政策&#xff0c;伦敦金后市行情解析 QQ截图20180123153028.png   尽管美国政府关门闹剧刚刚结束&#xff0c;但交易员、投资者和策略师对于美元的前景依然不太乐观。美国货币政策对美元的影响力减弱可能是全球通货再膨胀交易的另一个…
阅读更多...
最新文章

Copyright @ 2022~2023