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

谁践踏了优雅 2022-12-13 12:58 244阅读 0赞

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center]

wxml

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;
    }

// 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 () { 
    
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/89420b2e7d0c4d46b9c437b03778ca6d.png