當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/9 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序之 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

<view class="container">  <view class="nav_left"> <block wx:for="{{navLeftItems}}" wx:key="id">   <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> <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

<view class="container"><view class="nav_left"><block wx:for="{{cateItems}}" wx:key="id"><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.效果圖

總結

以上是生活随笔為你收集整理的微信小程序之 SideBar（侧栏分类）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： el-table文字超出隐藏；el-ta
下一篇： Winform-信息管理系统源码分享（A