微信小程序事件傳參解析

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

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

 

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

在對應的js中響應該事件

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

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

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

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

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

 

(1)

JS部分的代碼

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

(2)

WXML部分的代碼(傳item)

JS響應bindQuery事件的部分

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章