微信小程序循环 wxfor、wxfor-item(s)区别与联系、data-xxx、wx-key使用

微信小程序循环 wx:for、wx:for-item(s)区别与联系、data-xxx 、wx-key使用

wx:for、wx:for-items、wx:for-item的区别和联系

小程序的列表视图循环使用： wx:for、wx:for-items、wx:for-item 。

从定义上来说，

wx:for 用于单纯的数组循环。一般数组的元素是数字或字符串。

wx:for-items 用于复杂的循环，子元素可以是包含多个属性的对象。

注：如果未设置 wx:for-item，则可以在循环中直接通过 {{item.属性名}} 来访问子元素的属性值。

wx:for-item 一般结合wx:for-items 使用，相当于给子元素起别名，如果缺省，默认值是 item，如果设置 wx:for-item=‘bName’，则可以在循环中通过 {{bName.属性名}} 来访问子元素的属性值。

注： wx:for 和 wx:for-items 都是用来遍历数组。

以上两种方式效果一样都是遍历数组中的元素放到复选框中，并且给复选框初始值，wx:for 或者 wx:for-items 的值是要遍历的数组。

• wx:for-index 该属性表示的是循环的下标（从 0 开始），默认是 index，和 wx:for-item 一样，如果 wx:for-index 有值则以它现在的值为准

  ---

wx:key

wx:key是对微信循环功能的一次提升，在软件编译的时候，微信会提示你是用 wx:key来稳定视图层的项目显示。

wx:key 的值以3种形式提供

1. 字符串
2. 代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
3. 保留关键字 *this
4. 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

​ 一般是指定一个唯一的字段(类似于id的定义);

5. 通配符+名字

例如 *item
如果不设置 wx:key,控制台会打印警告：

 Now you can provide attr "wx:key" for a "wx:for" to improve performance.
 
可以通过设置 wx:key=“key” 来去掉警告，例子同样参考参见上一份代码。

在循环中设置 data-xxx 从而便于在监听事件中获取与子视图绑定的数据

例如，在子元素的标签中设置了 data-taskdate="{{item.date}}"

可以在 js 文件的监听回调函数中通过 e.currentTarget.dataset.taskdate 来得到子元素上绑定的日期属性。

总结不到位的地方 见谅。