小程序--事件处理

一、事件对象

给小程序的事件传递参数，有以下两种方法：

1、自定义属性

<view class="item" wx:for="{{ 5 }}" wx:key="*this" data-index="{{index}}" bind:tap="onClick"></view>

Page({
  onClick(e) {
    // 自定义属性
    console.log(e.target.dataset.index)
  }
})

2、mark属性

<view class="item" wx:for="{{ 5 }}" wx:key="*this" mark:index="{{index}}" bind:tap="onClick"></view>

Page({
  onClick(e) {
    // mark属性
    console.log(e.mark.index)
  }
})

3、实现tab切换高亮

小程序中，只能写一个class，否则会出现覆盖现象

<view class="item {{activeIndex === index ? 'active' : ''}}" wx:for="{{ 5 }}" wx:key="*this" mark:index="{{index}}" bind:tap="onClick"></view>

Page({
  data: {
    activeIndex: 0
  },
  onClick(e) {
    this.setData({
      activeIndex: e.mark.index
    })
  }
})