参考事件 | 微信开放文档 (qq.com)。

将wxml节点中的数据传递到js页面进行处理

节点中使用data-DataName

bindtap表示在此节点上绑定一个tap事件，事件处理函数为tapName。可以将节点上的数据传到事件处理函数tapName上，使用data-DataName来传递，其中DataName为传递的属性名。

1
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

tap上面的节点后，将tap的相关信息封装为event传到js页面中的tapName函数（绑定的事件处理函数），打印event可看到里面封装了哪些信息。

1
2
3
4
5
Page({
  tapName: function(event) {
    console.log(event)
  }
})

需要注意的有：

target封装了触发事件的节点id和传出来的数据dataset。节点传出的属性hi可用event.target.dataset.hi来访问。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

节点中使用mark:MarkName

1
2
3
<view mark:myMark="last" bindtap="bindViewTap">
  <button mark:anotherMark="leaf" bindtap="bindButtonTap">按钮</button>
</view>
1
2
3
4
5
6
Page({
  bindViewTap: function(e) {
    e.mark.myMark === "last" // true
    e.mark.anotherMark === "leaf" // true
  }
})
方式 特点
节点上使用data-DataName属性 只传递该节点的DataName，使用event.target.dataset.DataName访问
节点上使用mark:MarkName属性 传递该节点+直到其根节点全部节点的mark数据（不管事件是否冒泡），使用event.mark.MarkName来访问