小程式系列課程之6事件繫結獲取元素ID,頁面傳值,獲取資料
根據在頁面需要實現不同的跳轉和不同的頁面傳值,梳理了以下情況
情況一:在小程式的開發過程中會用到動態傳參,比如根據某一個頁面傳參不同,載入不同的新的頁面(一般會用到wx:for迴圈顯示陣列,實現的功能是點選不同的元素進入不同的頁面,比如在另一個頁面載入某個元素的詳細資訊。)
情況一(解決方案):
1、跳轉方式:採用navigator跳轉,在navigator跳轉的連結上將引數加上去:
通過點選時,傳入的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
})
}
})
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到資料id2、點選事件到對應的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、