注:文章中有些地方会把小程序的内容和 Android 的知识关联起来,以便于 Android 程序员更快的理解小程序。
tap 事件
小程序中没有 onClick 事件,需要通过 bindtap 或者 catchtap 事件来获取点击事件,
两者的区别是:bindtap 不消费 onTouch 事件,catchtap 消费 onTouch 事件。
自定义属性
如果想在每一个for循环中取得自定义属性的属性值,那么就需要给该 UI 控件设置一个 id ,
这个 id 也要和 数据源的 item 绑定。
此时,需要自定义属性名,在小程序中,自定义属性的规则为:
data-xxx 或者data-xxx-xxx-xxx
红色的data-是固定的,后续xxx可以随意填写。
例如, template 模版的父 view 中,设置自定义属性名如下
<block wx:for="{{yy.data}}">
<view catchtap="onTextTap" data-idxx-ABC-Def-ghm-nQP="{{item.idxx}}">
<template is="templateMain" data="{{item}}"/>
</view>
</block>
这里,自定义属性为
data-idxx-ABC-Def-ghm-nQP
设置的复杂是为了说明属性值在 js 中的获取规则,往下看。
在 js 代码中通过如下方式获取自定义属性和值:
onTextTap: function (event) {
var idc = event.currentTarget.dataset.idxxAbcDefGhmNqp;
console.log("onTextTap = " + idc);
},
event.currentTarget.dataset. 这个前半段是固定的写法,
最后的 idxxAbcDefGhmNqp 才是我们自己定义的属性名,
这里我们可以看到,设置自定义属性时候填写的 xxx 都被自动转换成了驼峰命名法的属性名!
另外,注意, 这个 target 和 currentTarget 的区别是:
target 指的是当前点击(bindtap)的组件,currentTarget 指的是捕获事件( catchtap )的组件。
event.target.dataset. // 对应 bindtap 的组件携带的数据
由于 微信 ide 代码补全不够完善,这里只能自己注意。