微信小程序列表页点击跳转到对应列表项的数据详情页

本文链接：https://blog.csdn.net/m0_69772768/article/details/140693360

列表页内容

wxml

data-id="{{item.id}} 自定义命名

<view class="{{status=='0'?'view-state-await':'view-state-finish'}}" bindtap="navigateTo" data-id="{{item.id}}">
 {{item.status}}
</view>

js

url后的id也是自定义命名，但需和wxml的命名一致

//点击列表项跳转到对应的消息回复页面
  navigateTo :function(e){
    // console.log(e)
    let id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: '../feedbackReplied/feedbackReplied?id='+id,
    })
  },

详情页内容

js

//拿到列表页传递的参数
  onLoad: function (options) {
    // console.log(options)
    const id = options.id
    console.log(id)
    this.setData({
      id: id
    })
  },

通过列表页传递的id，对数组进行find方法，找到id等于列表页id的数据并返回

const {
  feedbackListData
} = _this.data
 feedbackListData.push(...res.data)
 console.log("feedbackListData", feedbackListData)
 const feedbackInfo = feedbackListData.find(function (person) {
  return person.id === this.data.id
}, this) // 将 this 作为第二个参数传递，确保在回调中可以正确访问this.data.id