微信小程式 資料清單渲染後跳轉詳情頁（頁面帶參跳轉及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中，直接用指派的數組.接口字段名就好了

這樣的話就可以實作點選更多跳轉到詳情頁面了。