zoukankan      html  css  js  c++  java
  • 微信小程序之 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;  
       100%;  
      height: 100%;  
      background-color: #fff;  
      color: #939393;  
    }  
      
    /*左侧栏主盒子*/  
    .nav_left{  
      /*设置行内块级元素(没使用定位)*/  
      display: inline-block;  
       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%,高度占满,并使用百分比布局*/  
       75%;  
      height: 100%;  
      padding: 10px;  
      box-sizing: border-box;  
      background: #fff;  
    }  
    /*右侧栏list的item*/  
    .nav_right .nav_right_items{  
      /*浮动向左*/  
      float: left;  
      /*每个item设置宽度是33.33%*/  
       33.33%;  
      height: 80px;  
      text-align: center;  
    }  
    .nav_right .nav_right_items image{  
      /*被图片设置宽高*/  
       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;  
       100%;  
      height: 100%;  
      background-color: #fff;  
      color: #939393;  
    }
     /*左侧栏主盒子*/  
    .nav_left{  
      /*设置行内块级元素(没使用定位)*/  
      display: inline-block;  
       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%,高度占满,并使用百分比布局*/  
       75%;  
      height: 1000px;  
      padding: 10px;  
      box-sizing: border-box;  
      background: #fff;  
    }  
    /*右侧栏list的item*/  
    .nav_right .nav_right_items{  
      /*浮动向左*/  
      float: left;  
      /*每个item设置宽度是33.33%*/  
       33.33%;  
      height: 120px;  
      text-align: center;  
    }  
    .nav_right .nav_right_items image{  
      /*被图片设置宽高*/  
       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.效果图

  • 相关阅读:
    Mac下ssh连接远程服务器时自动断开问题
    解决php中json_decode的异常JSON_ERROR_CTRL_CHAR (json_last_error = 3)
    如何写.gitignore只包含指定的文件扩展名
    python操作mysql数据库
    php数组函数
    Python中字符串切片操作
    Python实现字符串反转的几种方法
    每个Android开发者都应该了解的资源列表
    Android Studio 入门指南
    一个优秀的Android应用从建项目开始
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8306857.html
Copyright © 2011-2022 走看看