小程序开发中遇到点击某个组件需要得到当前点击图片的某些属性,如当前的位置或者图片链接,此时就可以通过自定义属性来获取。
1. 定义
自定义属性的标识 data-attrName ,其中后面的“attrName”为随意命名,前缀“data-”是必须的。
2. 使用
在wxml文件中增加类似如下代码:
<image class="image-style" data-src='{{imgSrc}}' src="{{imgSrc}}" bindtap="previewImage"></image>
然后在预览界面就可以如下展示:
// 预览图片
previewImage: function(e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imgList // 需要预览的图片http链接列表
})
},
3. e.target 与 e.currentTarget
e.target 拿的是点击的对象的属性;
如果是 data- 放到外层了,点击里面的元素是拿不到属性值的;
而用 e.currentTarget 则是拿 bintap/catchtap 所在的对象的属性~,点击里面的元素一样能拿到属性值 。
<view class='a-child' data-tid='{{child.ID}}' bindtap='selectChild'>
<image class='avatar' src='../../images/localImages/default_user.png'></image>
<view class='child-mid'>
<view class='mid-top child-name'>{{child.STUDENTNAME}}</view>
</view>
</view>
示例中 要拿 tid 要如下:
selectChild: function(e) {
//获取ID
var tid = e.currentTarget.dataset.tid
console.log('tid: ' + tid)
},