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

废话不多说，直接上代码
index.wxml：

  
  {{item.text}}
  
   {{content}}
  

index.wxss：

.warp {
   width: 100%;
   height: 100%;
   background: #f2f2f2f2;
   display: flex
}
.list {
     width: 200rpx; 
     height: 100%
}
.style {
   width: 200rpx;
  height: 100rpx;
  line-height: 100rpx;
   padding-left: 20rpx;
   box-sizing: border-box;
}
.content {
  width: 100%;
  line-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
.active{
   color: red
}

wx.js：

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
     num:0,
     content:'今日头条',
     message:[
       {
         id:'0',
         text:"今日头条"
       },
       {
         id: '1',
          text:'趣头条'
       },
       {
         id: '2',
         text: '百家号'
       },
       {
         id:'3',
         text: '企鹅号'
       },{
         id:'4',
         text:'大鱼号'
       }
     ]
  },
  clickList:function(e){
     console.log(e)
     let num = e.target.id
     console.log(num)
     let content = this.data.message[num].text
     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 () {

  }
})

this.data.message[num].text 通过传过来的数字对应查到对应数组的索引值中的text ，this.data.message[num] 是一个object， id="{{index}}" 是当前的索引值。