小程序系列課程之6事件綁定獲取元素ID，頁面傳值，獲取數據

根據在頁面需要實現不同的跳轉和不同的頁面傳值，梳理了以下情況

情況一：在小程序的開發過程中會用到動態傳參，比如根據某一個頁面傳參不同，加載不同的新的頁面（一般會用到wx:for循環顯示數組，實現的功能是點擊不同的元素進入不同的頁面，比如在另一個頁面加載某個元素的詳細信息。）

情況一（解決方案）：

1、跳轉方式：採用navigator跳轉，在navigator跳轉的鏈接上將參數加上去：

<!--itemName是內容 key爲索引-->

<block wx:for="{{requestData}}" wx:for-item="itemName" wx:for-index="index">

<navigator url="/pages/detail/detail?id={{index}}" >

</navigator>

</block>

 通過點擊時，傳入的index到詳細頁面detail

2、從傳入的index，到新的頁面js中（接收index.wxml傳遞的參數並處理）

detail.js

Page({ 
   onLoad: function (options) { 
   console.log(options.id) 
   var init = myData.searchmtdata(options.id) 
   this.setData({ 
      data_MTId: init.MTId, 
     data_status: init.status, 
     data_duration: init.Duration, 
     data_Operator: init.Operator, 
     data_IdleReason: init.IdleReason 
 }) 
 } 
}) 

searchmtdata這個方法在之前的博客中已經有說明，就是根據id的值來查詢，返回一個list中具體的對象，即某個item的詳細信息。
onLoad:function這個函數在頁面加載時就會執行一次，options就是接收的從index.wxml傳遞過來的參數。根據id查詢到具體的list對象後再進行賦值，此時data_**中的數據就是某個item的詳細信息了。

3、查詢得到數據之後，在前端做顯示（detail.wxml）

1、小程序裏的點擊事件

<text id='{{index}}' bindtap='bindItemTap'> click me</text>

綁定事件bindItemTap id爲{{index}}。由於這是單個的綁定，這裏不容易出錯。

重點： 對於列表渲染之後的情況，需要注意id寫的地方，通過console 能夠看到具體的數據。

<view class='teamright' >

<view class="flex-item nametxt" >

<text id='{{index}}' bindtap='bindItemTap'> {{index}} {{itemName.teamName}}</text>

</view>

<view class="flex-item jianjietxt " id='{{index}}' bindtap='bindItemTap'>

<text >{{itemName.shanchang}} </text>

</view>

</view>

注：上下兩個text 在這裏的區別，

上面是對text進行了id 和事件綁定，在事件event中能夠console到數據

下面是對view進行了id和事件綁定，在事件event中不能夠console到數據id

   2、點擊事件到對應的js中

bindItemTap: function (e) {

//獲取當前item的下標id，通過currentTarget.id

var index = e.currentTarget.id;

//var index=e.target.id

console.log(index);

console.log(e);

//用來實現跳轉，並把傳遞數據

wx.navigateTo({

url: '../teamdetail/teamdetail'+index})

}

注：在獲取具體的內容時，可以通過console中看到數據，然後考慮currentTarget、target

來獲取數據(currentTarget和target的區別)

3、