小程序中view的自定义属性获取

小程序开发中遇到点击某个组件需要得到当前点击图片的某些属性，如当前的位置或者图片链接，此时就可以通过自定义属性来获取。

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)
  },