小程序開發序列(六)事件傳參

在觸發事件后，有時需要有些額外的數據，JS的寫法是直接以參數的形式傳遞。而小程序是react模式的，使用data觸發狀態變化而刷新界面，綁定的事件里，綁定的是函數的名稱，參數無法像一般編碼的方式直接傳入，那要怎么辦？

小程序提供了一種方式，即daa-xxx，其中data-是標識事件觸發時會帶上這個參數，xxx是參數名。比如按鈕綁定了query事件，需要傳入一個產品的編號no作為參數，那我們在wxml中可以這樣寫：

<button type="default" bindtap="bindQuery" data-no='123456789'>查詢</button>

在對應的js中響應該事件

bindQuery:function(e)
{
    var no=e.currentTarget.dataset.no;
}

在wxml中data-xxx，xxx是什么，在相應的事件中e.currentTarget.dataset.xxx的xxx就是什么，兩者一一對應。這樣就在事件中傳遞參數。

如果傳遞的參數是動態的，那么可以用動態的方式來寫，比如

<button type="default" bindtap="bindQuery" data-no='{{currentNo}}'>查詢</button>

其中currentNo，在js面中的data進行寫義，即

Page({
  data: {
    currentNo: '123456789'
  }
})

如果是來自於循環item的數據，可以直接傳item或item的某個字段值，比如

(1)

JS部分的代碼

Page({
  data: {
    list: [{name:'A',no:100001},{name:'B',no:100002}]
  }
})

WXML部分的代碼(傳item的字段)

<view wx:for="{{list}}">
  <button type="default" bindtap="bindQuery" data-no='{{item.no}}'>查詢{{item.name}}</button>
</view>

(2)

WXML部分的代碼(傳item)

<view wx:for="{{list}}">
  <button type="default" bindtap="bindQuery" data-item='{{item}}'>查詢{{item.name}}</button>
</view>

JS響應bindQuery事件的部分

bindQuery:function(e)
{
    var item=e.currentTarget.dataset.item;
}

轉載請注明出處。