wx:for wx:for-item wx:for-index wx:for-key

wx:for 语法

小程序中列表渲染时，使用 wx:for 控制属性，来绑定一个数组，绑定后，即可使用数组中各项的数据，来渲染该组件。例子如下：

// array = [
//      {name:zs,age:18},
//      {name:lisi,age:18}
//   ]
<view wx:for="{{array}}">
      <view> {{item.name + item.age }}  </view>
</view>

wx:for-item

wx:for-item , 数组当前项的变量名,默认为 item
作用：使用 （当前项变量名.属性名） 取得属性值

<view wx:for="{{array}}">
      <view> {{item.name + item.age }}  </view>
</view>

等同于 （需要注意的是 item 不使用{{}} 括起）

<view wx:for="{{array}}" wx:for-item=“item”>
      <view> {{item.name + item.age }}  </view>
</view>

赋值 （可随意命名）

<view wx:for="{{array}}" wx:for-item=“info”>
      <view> {{info.name + info.age }}  </view>
</view>

wx:for-index

wx:for-index, 数组的当前项的下标变量名 , 默认为 index

<view wx:for="{{array}}">
      <view> {{item.name + item.age }}  </view>
</view>

等同于

<view wx:for="{{array}}" wx:for-index=“index”>
      <view> {{item.name + item.age }}  </view>
</view>

赋值（可随意命名）

<view wx:for="{{array}}" wx:for-index=“key”>  // 赋值后，代码块内可以使用key代指当前项的下标
      <view> {{key}} </view>
</view>
// 界面输出
// 0
// 1

wx:for-key

1）wx:key 来指定列表中项目的唯一的标识符。
2）作用：希望列表中的项目保持自己的特征和状态
3）wx:key 的值以两种形式提供
1、字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2、保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
示例：

不使用 wx:for-key状态

使用 wx:for-key状态 随之改变

data-*

data-xxx，自定义属性，触发事件时，会发送给事件处理函数, 即可通过e.xx进行数据获取。

 <view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
----------------
Page({
  tapName: function(event) {
    console.log(event)
  }
})

可以看到log出来的信息大致如下：

{
  "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
  }]
}