微信小程序 数据列表渲染后跳转详情页（页面带参跳转及js获取参数）

需求：

点击当前页的任意一条数据，跳转到该数据段的详情页面！

逻辑：

首先要获取点击该条数据段的id,传递给跳转页面那边；

然后在详情页面那边接收id，再根据id来渲染后台相应的数据。

一、获取id

在wxml里面给它一个view  ，在view里面设置按钮事件以及data-id来抓取点击的id

按钮事件的代码编写：

//去详情页面
 toClockdetails(event){  
    let index = event.currentTarget.dataset.id;   //抓取id进行赋值
    console.log(event)
    wx.navigateTo({
      url: '/pages/myclock/clockdetailed/index?id=' + index,
//通过url传递id过去
    })
  },
           

二、到详情页面的js里面接收id，进行数据渲染

在data里面定义一个变量来装数据

然后在onLoad里面页面加载id，因为id已经传递过来了，所以在微信小程序自带的监听页面加载中就可以直接获取到了，因为options就是可以存入传过来的数据，你可以通过console.log(options)打印查看一下内容

更新给this.data.index(赋值给data定义的变量)

注：要先更新id才能用他

这里就得到了id赋值给你变量

// 渲染数据
  clockData() {
    var _this = this
    wx.request({
      url:' 接口url' + this.data.index, //url   this.data.index是id
      method: 'GET', //请求方式
      header: {
        'content-type': 'application/json'
      }, // 设置请求的 header 
      success: function (res) {
        let list = [];
        let box = (res.data.obj.assignDates === null) ? [] : res.data.obj.assignDates.substring(0, res.data.obj.assignDates.length - 1).replace(/,/g, " ")  
 //这里的效果跟上面的是一样的效果，就是不用foeEach循环了，就是另一种方法，这个较麻烦一点
          list.push((box.length <= 0) ? [] : box.split(' '))
        _this.setData({
          list,
          clockresult: res.data.obj,
        })
      },
      fail: function () {
        app.consoleLog("请求数据失败");
      },
      complete: function () {
      }
    })
  },
           

在详情页面的wxml中，直接用赋值的数组.接口字段名就好了

这样的话就可以实现点击更多跳转到详情页面了。