废话不多说，直接上代码
index.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='content'{{content}}/view /viewindex.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.jsPage({ /** * 页面的初始数据 */ 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}}" 是当前的索引值。
