1. 程式人生 > >小程式系列課程之6事件繫結獲取元素ID,頁面傳值,獲取資料

小程式系列課程之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、