微信小程序之 SideBar（侧栏分类）
2024-09-30 11:06:13
项目目录：
模拟数据：
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.效果图
最新文章
- Android自定义属性时TypedArray的使用方法
- [C]记录C语言中由于粗心遇到的奇葩错误.
- Python 中 open（）文件操作的方式
- Subsequence（两个单调队列）
- JMS详细的工作原理【转】
- java.lang.NoClassDefFoundError: org.ksoap2.transport.HttpTransportSE异常处理
- (中等) POJ 3225 Help with Intervals , 线段树+集合。
- Java中线程总结
- 怎么修改mysql中user表的密码？？？？
- MVVMLight 1：MVVMLight介绍以及在项目中的使用
- Combiners和Partitioner编程
- .NET Core微服务之基于IdentityServer建立授权与验证服务
- [python]numpy.mean()用法
- MD5加密过时方法替换
- 使用SSM重新开发计科院网站
- windows下Redis的安装和使用
- 20)django-session使用
- mac mysql5.5升级5.7记录
- TCP的TIME_WAIT快速回收与重用
- SpringMvc 全局异常处理器定义，友好的返回后端错误信息
热门文章
- 检查bug
- 如何移除不再插入Windows设备的信息
- 错误: 代理抛出异常错误: java.rmi.server.ExportException: Port already in use: 1099; nested exception is: java.net.BindException: Address already in use: JVM_Bind
- 12scrapy_redis
- CreateProcess相关
- PHPTaint-检测xss/sqli/shell注入的php扩展模块[转]
- powerdesigner批量导出sql
- Python+selenium常用方法（Webdriver API）
- URAL 1277 Cops and Thieves
- zoj 2724 Windows Message Queue