1. 程式人生 > 實用技巧 >微信小程式-點選事件傳遞引數

微信小程式-點選事件傳遞引數

1、dataset

在標籤中利用data-xxx 來定義你要傳入的引數,,

然後事件中傳入 event 用event.currentTarget.dataset.xxx來取你傳入的值

在 WXML 中,這些自定義資料以data-開頭,多個單詞由連字元-連線。這種寫法中,連字元寫法會轉換成駝峰寫法,而大寫字元會自動轉成小寫字元。如:

  • data-element-type,最終會呈現為event.currentTarget.dataset.elementType
  • data-elementType,最終會呈現為event.currentTarget.dataset.elementtype
<
view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫
  }
})

2、mark

2.7.1以上,可以使用mark來識別具體觸發事件的 target 節點。此外,mark

還可以用於承載一些自定義資料(類似於dataset)。

當事件觸發時,事件冒泡路徑上所有的mark會被合併,並返回給事件回撥函式。(即使事件不是冒泡事件,也會mark。)

<view mark:myMark="last" bindtap="bindViewTap">
  <button mark:anotherMark="leaf" bindtap="bindButtonTap">按鈕</button>
</view>

如果按鈕被點選,將觸發bindViewTapbindButtonTap兩個事件,事件攜帶的event.mark將包含myMark

anotherMark兩項。

Page({
  bindViewTap: function(e) {
    e.mark.myMark === "last" // true
    e.mark.anotherMark === "leaf" // true
  }
})

細節注意事項:

  • 如果存在同名的mark,父節點的mark會被子節點覆蓋。
  • 在自定義元件中接收事件時,mark不包含自定義元件外的節點的mark
  • 不同於dataset,節點的mark不會做連字元和大小寫轉換。