有一个需求，就是左边显示分类，右边显示具体的商品。

太高深的技术还没有学到,觉得这种方法也可，特记录一下。

.wxml

  
      
      
      {{item.FenLeiMengCheng}}
    


  
    {{item.ShangPinMing}}
  

{{motto}}

.js

// index.js
// 获取应用实例
//const app = getApp()

Page({
  motto: 'Hello World',
  data: {
    motto: 'Hello World',
    AllShangPin:[
      {
        FenLeiID:1,
        FenLeiMengCheng:"A1",
        ShangPins:[
          {
            ShangPinID:1,
            ShangPinMing:"A1-1"
          },
          {
            ShangPinID:3,
            ShangPinMing:"A1-2"
          }
        ]
      },
      {
        FenLeiID:2,
        FenLeiMengCheng:"B1",
        ShangPins:[
          {
            ShangPinID:2,
            ShangPinMing:"B1-1"
          },
          {
            ShangPinID:4,
            ShangPinMing:"B1-2"
          }
        ]
      }
    ],
    FenLeiID:1,
    c_CurIndex:0
  },
  switchRightTab: function (e)
  {
    let m_fenleiid = e.target.dataset.id
    let m_Index = parseInt(e.target.dataset.index)
    this.setData({
      FenLeiID:m_fenleiid,
      c_CurIndex:m_Index
    })
  }
})

.wxss

.usermotto {
  margin-top: 200px;
}
/*左侧栏主盒子*/  
.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; 
}
.nav_right{  
  /*设置行内块级元素（没使用定位）*/  
  display: inline-block;  
  width: 75%;  
  height: 100%;  
  /*主盒子设置背景色为灰色*/  
  /*background: #f5f5f5;  */
  /*text-align: center;  */
}   

.json

{
  "usingComponents": {}
}