微信小程序点击左侧列表显示右侧内容

效果：

wxml

<view class='warp'>
  <view class='list'> 
  <view class='style {{item.id==num?"active":""}}' catchtap='clickList' wx:for="{{message}}" wx:key="" id="{{index}}">{{item.text}}</view>
  </view>
  <view class='list2'>
        <view class='content' wx:for="{{content}}" wx:key="index">{{item.text}}</view>
  </view>
  </view>

wxss

.warp {
  width: 100%;
  height: 100%;
  background: #fafafa;
  display: flex
}
.list {
    width: 200rpx; 
    height: 100%;
    background-color: #f2f2f2;
}
.list2 {
    width: 200rpx; 
    height: 100%;
    background-color: #d3d3d3;

}
.style {
  width: 200rpx;
 height: 100rpx;
 line-height: 100rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
}
.content {
  background-color: #d3d3d3;
 width: 200rpx;
 height: 100rpx;
 line-height: 100rpx;
  padding-left: 20rpx;
  /* box-sizing: border-box; */
 /* display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center; */
 }
.active{
  color: red;
  font-weight: bold;
  background-color: #fafafa;
}

js

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
     num:'',
     content:'请选择',
     message:[
       {
         id:'0',
         text:"商区",
         children:[
          {
            id:'0',
            text:"爸爸1",
          },
          {
            id:'0',
            text:"爸爸2",
          }
         ]
       },
       {
         id: '1',
          text:'地铁',
          children:[
            {
              id:'0',
              text:"妈妈1",
            },
            {
              id:'0',
              text:"妈妈2",
            }
           ]
       },
     ]
  },
  clickList:function(e){
     console.log(e)
     let num = e.target.id
     console.log(num)
     let content = this.data.message[num].children
     console.log(content.text)
      this.setData({
          num:num,
          content:content
      })
      console.log(this) 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
     
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})