微信小程序之 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.pswp.cn/news/278579.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/278579.shtml
英文地址，請注明出處：http://en.pswp.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